JSBin

Question

我有四个DIV：

第一个div的高度固定，位于顶部（标题）。
第二个div也有一个固定的高度，位于第一个div下方。
第四个div的底部有一个固定的高度。
第三个div将具有一个可变高度：它将扩展为使得四个div的总数在浏览器中填满垂直空间，如果内容小于该值。但如果内容的高度大于该高度，它将遵循内容的高度。所以在任何时候，我都希望第一个div（标题）粘在页面顶部，第四个div（页脚）粘在页面底部。我无法知道内容的高度。
头头头头

CSS文件：

#container { width:800px; height:*; }
#header    { height:200px; }
#menu      { height:50px; }
#content   { height:*; }
#footer    { height:150px; }

我真的可以这样做吗？如何正确的css方式来做到这一点？我觉得这应该不会太难，但我无法在任何地方找到相关的答案。谢谢。

Answer 1

你能做的是这样的事情：

#content { height: 100vh; /*100% of viewport height*/
     margin-top: 250px;
     margin-bottom: 150px; }

这样它总是100％的屏幕高度。

Answer 2

好吧，看起来很酷，

JSBin

<强> HTML

<div class="header">Header !</div>
<div class="menu">Menu !</div>
<div class="content">Content !</div>
<div class="footer">Footer !</div>

<强> CSS

body       { margin: 0; }
.header    { width: 100%; height: 200px; position: fixed; top: 0;        }
.menu      { width: 100%; height: 50px;  position: fixed; top: 200px;    }
.footer    { width: 100%; height: 150px; position: fixed; bottom: 0;     }
.content   { width: 100%; position: fixed; top: 250px; bottom: 150px;
             overflow: auto;                                             }

如何创建一个填满整个屏幕的垂直div？

2 个答案:

JSBin