CSS: указать элемент блока, чтобы заполнить высоту

Question

Кажется, что это самая легкая вещь в мире, но у меня возникают трудности. Я начал думать, что я не знал столько о CSS, как я думал, или CSS был разработан хуже, чем я думал.

У меня есть страница. В верхней части есть произвольная сумма разметки. Тогда есть элемент блока. Все, что я хочу сделать, это сделать этот элемент блока, увеличивая его высоту до нижней части окна.

См. http://jsfiddle.net/vHVeC/4/. Он близок, но последний элемент блока выходит за пределы видимой области браузера, создавая полосы прокрутки. Контент не должен выходить за пределы области просмотра (т. Е. Полосы прокрутки не должны быть).

Как я могу это сделать с использованием JavaScript?

Answer 1

Это, как вы можете сделать это с помощью таблицы (Это чистый CSS):

http://vidasp.net/tinydemos/table-layout.html

Answer 2

По-видимому, CSS has massive troubles finding heights. Ширина, не беспокойтесь.

Используя Javascript, вы бы пойти:

//Grab div element 
var obj = document.getElementById('theDiv'); 

//Enable sizing 
obj.style.position = 'relative'; 

//Force to window 
obj.style.height = document.documentElement.clientHeight+'px'; 

Кстати, в вашем Fiddle, незашифрованная узел над div является компенсируя div ниже. Он набирает 100% высоты тела, но затем наваливается вниз, вызывая полосу прокрутки. Способ исправить это в CSS - position:absolute;left:0;top:0, который фиксирует его на месте.

Также обратите внимание, что в любом из этих случаев, если вы закончите прокрутку (например, до 150%), вы увидите нижний край вашего div там на 100%.

Answer 3

Вы попали в css box model problem. Быстрое и грязное решение состоит в том, чтобы установить свойство overflow: hidden для предотвращения полос прокрутки, но вы должны быть очень осторожны в этом. Вам нужно будет убедиться, что ваш контент соответствует экрану, поскольку любой контент, выходящий за пределы элемента блока, будет недоступен для пользователей.