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

问题:

I'm not new at CSS, but this is problem for me and I can't solve it. I need to build layout as below:

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

Divs that are at the bottom and at the top have fixed heights. The one in the center have to be exacly in the height of PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT or in some cases smaller.

Also it have to had this size setted because I predict that sometimes it's content will be bigger than it and then it will need a scrollbar inside.

I will accept case when DIV2 will be smaller, but never too big to fit to page size with DIV1 and DIV3.

Any solutions will be good, not only using CSS, but if you have an idea you can throw some Javascript too... I will be grateful for any solution.. even not fully correct :)

回答1:

I believe you want something like this

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>

回答2:

This will help you center divs vertically and horizontally

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

回答3:

Using jQuery to set DIV2's height on window resize:

var $div1 = $('#DIV1'),
    $div2 = $('#DIV2'),
    $div3 = $('#DIV3'),
    $window = $(window);

$window.resize(function ()
{
    $div2.height($window.height() - ($div1.height() + $div3.height()));
});

is another option I've used.

回答4:

I'm not sure if i understand exactly what you ask. But what about this.

<html>
<head>
<style>
body {
    margin : 0
}

#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    border: solid 1px black
}
#middle
{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    width: 100%;
    overflow: auto;
    border: solid 1px green;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border: solid 1px blue;
}

</style>

</head>
<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</body>
</html>