Как правильно установить 100% высоту DIV в соответствии с высотой документа / окна?
У меня есть оболочка, расположенная по центру с повторяющимся по оси y фоновым изображением:
<body>
<div id="wrapper">
...some content
</div>
</body>
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}
Проблема: когда размер окна больше, чем высота оболочки, унаследованной от его содержимого, изображение, очевидно, не повторяется на y - ось до самого низа окна.
Я использовал jQuery для динамического применения встроенного стиля CSS к оболочке в соответствии с фактической высотой документа (когда DOM готов и при событии изменения размера окна):
$(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
$(window).resize(function(){
$('#wrapper').css({'height':($(document).height())+'px'});
});
});
Проблема с этим подходом заключается в том, что каждый раз расширяется окно height до размера больше, чем ранее измененный наибольший размер, высота документа увеличивается на эту разницу, по сути, делая оболочку DIV бесконечной, если вы продолжаете изменять размер окна бесконечно и имеете бесконечное пространство вертикального отображения.
На типичном 30-дюймовом дисплее с высотой 1600 пикселей, когда пользователь открывает веб-сайт с высотой окна 1000 пикселей и высотой оболочки 800 пикселей, jQuery выше устанавливает высоту на 1000 пикселей, правильно разбивая фоновое изображение. пользователь увеличивает размер окна, например, до 1400 пикселей, 1400 пикселей - это новый размер документа, «запомненный по умолчанию» и не обновляющий сам себя, даже если пользователь изменяет размер своего окна обратно до исходной высоты 1000 пикселей, добавляя 400 пикселей к высоте полосы прокрутки внизу.
Как это исправить?
ОБНОВЛЕНИЕ: (window) .height не работает, потому что высота окна - это высота области просмотра.Когда ваше окно просмотра меньше, чем содержимое, и вы его прокручиваете, оболочка всегда сохраняет размер окна просмотра и не распространяется до нижней части текущей позиции окна просмотра.