Как правильно установить высоту 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'});
    });
});

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

На типичном 30-дюймовом дисплее с высотой 1600 пикселей, когда пользователь открывает веб-сайт с высотой окна 1000px, а оболочка высотой 800px, jQuery выше устанавливает высоту 1000px для правильной обработки фонового изображения. На этом этапе пользователь расширяет размер окна, например, 1400px, 1400px - это новый размер документа, "запомненный по умолчанию" и не обновляется сам, даже если пользователь изменяет свое окно на первоначальную высоту 1000px, добавив 400px на высоту полосы прокрутки внизу.

Как это исправить?

UPDATE: (window). Исход не работает, потому что высота окна - высота видового экрана. Когда ваш видовой экран меньше содержимого и вы его прокручиваете, обертка всегда остается размером окна просмотра и не распространяется на нижнюю часть текущей позиции в окне просмотра.

Ответ 1

Я понял это с помощью кого-то. Но он по какой-то причине удалил его.

Здесь решение:

удалить все взлома высоты CSS и высоту 100%
Используйте 2 вложенных обертки, один в другом, например. #wrapper и #truecontent
Получить высоту окна просмотра браузера. Если он больше, чем #wrapper, тогда установите встроенный CSS для #wrapper в соответствии с текущей высотой просмотра в браузере (при сохранении #truecontent intact)

Слушайте событие (window).resize и ТОЛЬКО применяйте встроенную высоту CSS, если область просмотра больше высоты #truecontent, в противном случае сохраняйте неповрежденным

$(function(){
    var windowH = $(window).height();
    var wrapperH = $('#wrapper').height();
    if(windowH > wrapperH) {                            
        $('#wrapper').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('#wrapper').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#truecontent').height();
        if(windowH > truecontentH) {
            $('#wrapper').css('height', (newH)+'px');
        }

    })          
});

Ответ 2

Самый простой способ - добавить:

$('#ID').css("height", $(document).height());

после того, как правильная высота страницы определяется браузером. Если высота документа изменится, еще раз повторите предыдущий код.

Ответ 3

Вы можете сделать его absolute и поместить нули в top и bottom, который:

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}

Ответ 4

Простейший способ, которым я нашел, - viewport-height в css..

div {height: 100vh;}

для этого требуется высота окна просмотра окна браузера и обновляется во время изменения размера.

см. "могу ли я использовать" для списка совместимости браузеров

Ответ 5

html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}

Ответ 6

вот как я ответил, что

<script type="text/javascript">
    function resizebg(){
        $('#background').css("height", $(document).height());
    }
    $(window).resize(function(){
        resizebg(); 
    });
    $(document).scroll(function(){
        resizebg(); 
    });
    //initial call
    resizebg();

</script>

CSS

#background{
position:absolute;
top:0;
left:0;
right:0;
}

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

но это еще одна история

Ответ 7

Используйте #element{ height:100vh}

Это установит высоту #element на 100% от viewport. Надеюсь, это поможет.

Ответ 8

почему бы вам не использовать width: 100% и height: 100%.

Ответ 9

показывает этот

<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function handleResize() {
var h = $(window).height();
        $('#wrapper').css({'height':h+'px'});
}
$(function(){
        handleResize();

        $(window).resize(function(){
        handleResize();
    });
});
</script>
</head>
<body>
        <div id="wrapper">
                ...some content
        </div>
</body>