How to properly set the 100% DIV height to match document/window height?

问题

I have a wrapper positioned to center with an y-repeated background image:

<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;
}

Problem: when the window size is higher than the wrapper's height inherited from its content, the image obviously doesn't repeat on y-axis all the way to the bottom of the window.

I've used jQuery to dynamically apply inline CSS style to the wrapper according to actual document height (when DOM is ready and on window resize event):

$(function(){
    $('#wrapper').css({'height':($(document).height())+'px'});
    $(window).resize(function(){
        $('#wrapper').css({'height':($(document).height())+'px'});
    });
});

The problem with this approach is that every time one extends the window height to a size larger than the previously resized largest size, the document height extends by this difference, essentially making the wrapper DIV infinite if you keep resizing the window infinitely and have a infinite vertical display space.

On a typical 30" inch display with 1600px height, when user opens the website with a window height 1000px and wrapper is 800px high, the jQuery above sets the height to 1000px tiling the background image correctly. At this point, once the user extends the window size to e.g 1400px, the 1400px is a new document size "remembered default" and doesn't update itself even if the user resizes his window back to the original 1000px height, adding 400px to the scrollbar height at the bottom.

How to fix this?

UPDATE: (window).height doesn't seem to work, because window height is a viewport height. When your viewport is smaller than the content and you scroll it, the wrapper always stays the size of the viewport and doesn't extend to the bottom of the current viewport position.

回答1:

I figured it out myself with the help of someone's answer. But he deleted it for some reason.

Here's the solution:

remove all CSS height hacks and 100% heights
Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
Get the height of a browser viewport. IF it's larger than #wrapper, then set inline CSS for #wrapper to match the current browser viewport height (while keeping #truecontent intact)

Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact

$(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:

The easiest way is to add the:

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

after the correct page height is determined by the browser. If the document height is changed once more re-run the above code.

回答3:

You could make it absolute and put zeros to top and bottom that is:

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

回答4:

simplest way i found is viewport-height in css..

div {height: 100vh;}

this takes the viewport-height of the browser-window and updates it during resizes.

see "can i use" for browser compatibility list

回答5:

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

回答6:

this is how i answered that

<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;
}

so basically on every resizing event i will overwrite the height of the div in this case an image that i use as overlay for the background and have it with opacity not so colorful also i can tint it in my case with the background color.

but thats another story

回答7:

Use #element{ height:100vh}

This will set the height of the #element to 100% of viewport. Hope this helps.

回答8:

why don't you use width: 100% and height: 100%.

回答9:

hows this

<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>

来源：https://stackoverflow.com/questions/9214040/how-to-properly-set-the-100-div-height-to-match-document-window-height

标签

jquery

html

css

height