How to expand div to cover remaining page height

问题

Sorry, searching has returned tons of results, but nothing that matches my problem exactly. Seems like SO is drowning in div-height problems. :-(

I have the following test layout:

<!DOCTYPE html>
<html>
<head>
    <title>Div Test</title>
    <style type="text/css" media="screen">
        body {
            margin:0;
        }
        div {
            width:100%;
        }
        .content {
            position:relative;
            float:none;
            margin-left:auto;
            margin-right:auto;
            display:block;
            width:680px;
        }
        #one {
            height:100px;
            position:relative;
            background-color:#0000FF;
        }
        #two {
            position:relative;
            background-color:#00FF00;
            height:100%;
            min-height:400px;
        }
        #three {
            height:70px;
            background-color:#FF0000;
            bottom:0;
            position:absolute;
        }
        #oneone {
            height:100%;
            background-color:#838383;
        }
        #twotwo {
            height:400px;
            background-color:#EEFF47;
        }
        #threethree {
            height:100%;
            background-color:#400080;
        }
    </style>
</head>
<body>
    <div id="one">
        <div class="content" id="oneone"></div>
    </div>
    <div id="two">
        <div class="content" id="twotwo">Expand this to the bottom.</div>
    </div>
    <div id="three">
        <div class="content" id="threethree"></div>
    </div>
</body>
</html>

I want the div one and three to stay in top and bottom, div twotwo should expand in height to accommodate my pagecontent, and expand when the content is more than the page height, therefore pushing the div three down and cause scrolling.

Is this possible without JavaScript? If so, what's the CSS solution to this? Thanks!

回答1:

Javascript is needed for this. When you have a header and footer height and you want the middle to have 100% height, the result will be full page height + header height + footer height. So you'll end up with scroll bars to view the entire page. If you want everything to fit in the same window, then you we need to use javascript to detect how much middle space is left and assign height accordingly.

To detect middle height with jQuery, you can do

var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);

This will give you the height that is left for the middle part which is <div id="two"> in your case.

See jQuery code in action at http://jsfiddle.net/Ppw5y/. Notice that when you expand the window and you run the code again, you will have a different content height.

回答2:

How about setting height:auto; for #two and #twotwo?

回答3:

I think it can be done without script. Check this code out.

<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
    body {
        margin:0;
    }
    div {
        width:100%;
    }
    .content {
        position:relative;
        float:none;
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:680px;
    }
    #one {
        height:100px;
        position:relative;
        background-color:#0000FF;
    }
    #two {
        position:relative;
        background-color:#00FF00;
        /*changed*/
        min-height:400px;
    }
    #three {
        height:70px;
        background-color:#FF0000;
        bottom:0;
        position:relative; /*changed*/
    }
    #oneone {
        height:100%;
        background-color:#838383;
    }
    #twotwo {
        /*changed*/
        min-height:400px;/*changed*/
        background-color:#EEFF47;
    }
    #threethree {
        height:100%;
        background-color:#400080;
    }
</style>
</head>
<body>
<div id="one">
    <div class="content" id="oneone"></div>
</div>
<div id="two">
    <div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
    <div class="content" id="threethree"></div>
</div>    
</body>
</html>

I have added a /* changed */ wherever i have changed your code.

来源：https://stackoverflow.com/questions/5047532/how-to-expand-div-to-cover-remaining-page-height

标签

javascript

jquery

html

css

height