创建固定高度的水平格与流体一

我想建立一个基地三行的布局：标题，内容和页脚格。两个最外面的div的高度是固定的;中心div必须是流畅的，并适应浏览器屏幕的高度。创建固定高度的水平格与流体一

Sample of layout

有人能指出我在正确的方向如何适当CSS解决呢？ ~~现在我还没有对JavaScript解决方案感兴趣。~~ 由于CSS没有提供干净的答案，JavaScript解决方案非常出色！

这是多远我就来了：

<div id='header'>Header</div> 
    <div id='content'> 
     <div id='innerContent'> 
      This is the fluid part 
     </div> 
    </div> 
<div id='footer'>footer</div>

CSS：

#header { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100px; 
    z-index:5; 
} 
#content { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100%; 
    z-index:2; 
} 
#innerContent { 
    margin-top:100px; 
    height:100%; 
} 
#footer { 
    height:400px; 
}

来源

2012-04-14 stUrb

你想页眉和页脚总是在看，无论主要内容是否已滚动？ – 2012-04-15 00:03:11

不，他们不必固定在浏览器屏幕上！ – stUrb 2012-04-15 00:04:08

如何关于一些JavaScript？ – Starx 2012-04-15 01:17:24

编辑：对不起，我感到尴尬。我在一年前做了类似的事情，但起初我并不认为有可能根据这种情况进行调整。显然是这样。

正如我以为其他人已经说过，可以通过绝对定位将页脚div放在底部。问题在于当内容div变大时调整它的位置。由于页脚是绝对定位的，它不会跟随内容div的流动，这使得即使内容扩展，它仍然保持在同一个位置。

诀窍是将所有东西都包裹在绝对定位的div中。如果内容变大，它将展开，并且页脚div将根据包装的边框而不是文档的边框进行定位。

这是代码。尝试在内容div中添加一堆<br />标签，你会发现一切都在调整。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Layout test</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #wrapper { 
     min-height: 100%; 
     min-width: 100%; 
     position: absolute; 
    } 

    #header { 
     height: 100px; 
     background-color: red; 
    } 

    #content { 
     background-color: gray; 
     margin-bottom: 50px; 
    } 

    #footer { 
     height: 400px; 
     min-width: 100%; 
     position: absolute; 
     bottom: 0px; 
     margin-bottom: -350px; 
     background-color: blue; 
    } 

    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id='header'>Header</div> 
     <div id='content'> 
      Content 

     </div> 
     <div id='footer'>footer</div> 
    </div> 
</body> 
</html>

ORIGINAL： ~~可悲的是，CSS缺乏干净的方式来做到这一点。~~你不知道viewport高度（你叫h），因此不能计算h-100-50你必须建立你的网站，以便大多数人会看到50px的页脚div。要做到这一点的方法是为内容div设置最小高度。

最小高度值必须从某个标准视口高度派生。谷歌实验室发表了关于视窗尺寸他们的访客的数据，并在这里取得的一个伟大的可视化： http://browsersize.googlelabs.com/

我设计我自己的口中，这是620px高（据谷歌〜80％有此视口的高度）。因此，内容div的最小高度应为620-100-50 = 470像素。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Layout test</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #header { 
     height: 100px; 
     background-color: red; 
    } 

    #content { 
     min-height: 470px; 
     background-color: gray; 
    } 

    #footer { 
     height: 400px; 
     background-color: blue; 
    } 

    </style> 
</head> 
<body> 
    <div id='header'>Header</div> 
    <div id='content'> 
     Content 
    </div> 
    <div id='footer'>footer</div> 
</body> 
</html>

来源

2012-04-15 01:11:46

您有为其全部定义的高度。 – Starx 2012-04-15 01:16:26

+1用于引用Google统计数据，以及一个很好的干净答案。值得注意的是，如果允许使用JavaScript，可以将脚本写入并绑定到浏览器大小调整事件，以确保内容始终是其大小的100％，而不是页眉/页脚。就像你所说的那样，CSS并没有自己处理这个问题。 – 2012-04-15 02:01:18

@Starx我不确定你的意思是“所有”？ – 2012-04-15 03:25:31