发表新帖
发表新帖

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

前端 未结
关注
9 1824
难免孤独
难免孤独 2021-01-30 04:53

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


    

        ...some content
    

&
相关标签:
9条回答
  • 佛祖请我去吃肉
    2021-01-30 05:01

    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

    0 讨论(0)
  • 南笙
    2021-01-30 05:06

    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.

    0 讨论(0)
  • 佛祖请我去吃肉
    2021-01-30 05:07

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

    #fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}
    0 讨论(0)
  • 清酒与你
    2021-01-30 05:12

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

    0 讨论(0)
  • 粉色の甜心
    2021-01-30 05:14

    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>
    0 讨论(0)
  • 孤独总比滥情好
    2021-01-30 05:17

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

    Here's the solution:

    1. remove all CSS height hacks and 100% heights
    2. Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
    3. 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)

    4. 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');
        }

    })          
});
    0 讨论(0)
 看不清?
提交回复
热议问题