css布局问题：一个高度100%的div和两个固定高度的div
这是 HTML 代码：
<div id="header">
</div>
<div id="container">
</div>
<div id="footer">
</div>
这是我想要实现的目标，尽管它不是有效的 CSS，但我想你会理解我的观点：
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
是否可以仅使用 CSS 来实现这样的布局：整个主体将适合屏幕尺寸始终，但是 #header 和 #footer 区域具有固定高度，然后主 div 占据剩余的所有高度。谢谢！！
Here is the HTML code:
<div id="header">
</div>
<div id="container">
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
is it possible to only use CSS for achieving some layout like this: the whole body will fit the screen size always, however the #header and #footer areas are with fixed height, and then the main div takes all the height left. Thanks!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
像这样的东西吗？ http://limpid.nl/lab/css/fixed/header-and-页脚 或者您不希望主要内容滚动？
Something like this? http://limpid.nl/lab/css/fixed/header-and-footer or you don't want the main content to scroll?
像这样的东西： http://ryanfait.com/sticky-footer/ 也可能是你的正在寻找
something like this: http://ryanfait.com/sticky-footer/ might also be what you are looking for