Question

以下是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占据所有高度。谢谢！

Answer 1

这样的东西？ http://limpid.nl/lab/css/fixed/header-and-footer或者您不希望主要内容滚动？

Answer 2

类似这样的内容：http://ryanfait.com/sticky-footer/也可能是您正在寻找的内容

css布局问题：高度100％div有两个固定高度div

2 个答案: