html - 内容 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;}

例子

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/