内容div不会根据需要调整大小

Question

我的网页上有以下三个div！

#header { //top div
height: 60px;
min-width: 1024px;
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
display: block;
}

#content { //middle div
min-width: 1024px;
min-height: 585px;
}

#buttons { //bottom div
min-width: 1024px;
height: 120px;
max-height: 120px;
background-color: rgba(229, 229, 255, 0.76);
}

如图所示，当分辨率发生变化时，内容div不会延伸！如何使内容div扩展以适应页面大小！没有任何垂直卷轴！

Answer 1

鉴于你有一个固定的高度页脚和标题，你可以通过以下html和css实现你想要的东西

<强> HTML

<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="buttons">
    </div>
</div>

<强> CSS

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:60px 0 120px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%;}
#header {margin-top:-60px; height:60px;}
#buttons {margin-bottom:-120px; height:120px;}

Example

Answer 2

假设您希望标题和按钮具有固定宽度，您可以对内容执行此操作：

#header.row { height: 60px; top: 0; }
#content.row { top: 60px; bottom: 120px; border: 1px solid black;}
#buttons.row { height: 120px; bottom: 0; }

http://jsfiddle.net/5hx5v/