可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.