div внутри td прокручиваемого тела. Номер прокрутки

table > tbody { 
    height: 600px; 
    display: block; 
    overflow: auto; 
} 

table > tbody > tr { 
    width:100%; 
    height: 1440px; 
    display:table; 
    table-layout:fixed; 
}

Этот css создает прокручиваемую «таблицу» или прокручиваемую «tr». Оно работает. Но моя проблема в том, что у меня есть «div» внутри «td внутри» tr. И когда я устанавливаю высоту «div» на 100% или любую высоту, чтобы весь «div» не находился в видимом диапазоне tbody, в этом случае в пределах 600 пикселей, появляется полоса прокрутки для документа . Полоса прокрутки для таблицы такая же, как и без 'div'.div внутри td прокручиваемого тела. Номер прокрутки

Полоса прокрутки документа простирается до тех пор, пока дно «div» должно быть «позади» «tbody». Когда я просматриваю таблицу, никаких изменений в полосе прокрутки документа нет.

Вот очень грубая версия моей проблемы: https://jsfiddle.net/hL8hemka/14/

Как вы можете видеть, есть две полосы прокрутки. Если вы не видите два, попробуйте удалить div { height: 100% } в разделе css. Вы заметите, что один из двух баров справа (где должна быть панель прокрутки документа) исчезнет.

Как создать div со 100% высотой tr без полосы прокрутки на документе?

источник

2016-07-05 user3290525

Почему вы хотите, чтобы 'tr' отображался как« таблица »? ... Для меня это выходит за рамки всей логики – LGSon

@LGSon Как вы думаете, в чем проблема? Мне очень сложно понять, что вы предлагаете в своем комментарии ... – user3290525

Я еще не предлагал решение, я просто хотел знать, почему вы задали 'tr' для отображения в виде' table' ... so вам на самом деле не нужно это делать? ... если нет, я отправлю решение, когда вернусь с работы – LGSon

Я не вижу две полосы прокрутки в вашей скрипке, если вы не имеете в виду, что есть горизонтальная и вертикальная полоса прокрутки?

В любом случае, если вы хотите скрыть полосу прокрутки на любом элементе, просто установите overflow-x или overflow-y (в зависимости от того, является ли полоса прокрутки вертикальной или горизонтальной) скрытой. Например, если бы я хотел, чтобы скрыть вертикальную полосу прокрутки, я бы установить перепускной-х, чтобы скрытый в моем CSS вот так:

body { 
    overflow-x: hidden; 
}

источник

2016-07-05 15:11:18 Cameron637

Просто отключить скроллбар:

body 
{ 
    overflow: hidden; 
}

fiddle

источник

2016-07-05 15:12:50 CdSdw

Wow. Это действительно имеет смысл. Кажется законным, если мне не понадобится полоса прокрутки, но что, если я хочу полосу прокрутки, но не «баггированную» полосу прокрутки? – user3290525

Это из-за того, что вы добавили границу в td, удалите ее, и она подходит всем правильно. Полоса прокрутки по оси х скрывается.

td { 
border:none; 
} 

div { 
    border: 1px solid #111; 
    height: 100%; /* Removing this hides the 'document' scrollbar*/ 
}

источник

2016-07-05 15:14:35 frnt

Если у вас нет других элементов в ячейках таблицы, я предлагаю вам использовать другой подход. Вместо заданной высоты для div вы можете позиционировать его как абсолютный элемент. Таким образом, вы можете измерять его с помощью свойств top, left, right и bottom.

td { 
    position:relative; 
} 

td > div { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

источник

2016-07-06 09:13:50 thetont

div внутри td прокручиваемого тела. Номер прокрутки

ответ

Смежные вопросы