DIV - 100% высота, вызывающая полосы прокрутки

У меня возникла небольшая проблема с разделителем прокрутки div, когда высота установлена на 100%.DIV - 100% высота, вызывающая полосы прокрутки

Прямо сейчас, мое содержание страницы выглядит;

<body> 

<hr> 

<div id="content"> 

    <div id="heading"> 

    </div> 

</div> 


</body>

Проблема в том, что HR составляет 5 пикселей, а содержание - 100% от высоты тела. Таким образом, поскольку он составляет 100% высоты страницы, он идет ниже HR и создает 5 пикселей, чтобы сделать полосу прокрутки, которую я хочу избежать.

Мой вопрос: как я могу сделать его высотой 100% не думая, что он должен быть 100% -ным весом страницы и не включать HR в высоту страницы?

Спасибо.

источник

2012-03-09 Konzine

Вы пробовали положить hr внутри содержимого div? – steveax

Не будет ли это просто заполняться, когда вы добавляете контент? – Liam

Этот вид макета лучше всего выполняется с использованием абсолютного позиционирования. Вот пример, с помощью HTML: http://jsfiddle.net/7KGmZ/

CSS:

#content 
{ 
    position: absolute; 
    top: 20px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
}

источник

2012-03-09 17:09:42 Hubro

Это сработало красиво, спасибо. Кроме того, удалив тег «Высота» из содержимого div, он по-прежнему вырос до тега тела. Аккуратно. Благодаря! – Konzine

Вы можете удалить hr и положить границу на headingdiv.
Вы можете удалить hr и установить границу на contentdiv и изменить box-sizing на border-box.
Вы можете переместить hr внутри contentdiv.

источник

2012-03-09 17:09:21 Joel

Вы можете попробовать:

position: absolute; 
top: 0px; 
bottom: 0px;

Это однако перекрываться по кадрам. Если вы установите верхнюю позицию на 5px, это не произойдет.

источник

2012-03-09 17:09:33 t0nyh0

Вы можете установить position: absolute, затем установите его с помощью top: 5px и bottom: 0;.

источник

2012-03-09 17:09:48 magicalex

Для меня проблема была в некоторых элементах в верхней части страницы, имеющих верхний край, верхнюю прокладку или верхнюю границу, мое тело имело верхнюю границу 10px, после того, как сделало его 0px, ползунок исчез.

источник

2013-09-13 10:38:27 Ivana

DIV - 100% высота, вызывающая полосы прокрутки

ответ

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