HTML 布局 - 即使没有内容也保持包装高度 100%

Question

我的 html 布局有一个小问题。

当我有内容时 - 它可以正常工作:

http://jsfiddle.net/exqofLft/

但是当我没有内容的时候。 “换行”高度变为 0，页眉和页脚放在一起。

例如:http://jsfiddle.net/aqgo9370/

当没有内容或内容很少时。我想要顶部的页眉，然后是全尺寸换行和页面底部的页脚。

任何想法如何做到这一点？

例如:

CSS:

html, body 
{
    height:auto;
    background-color:grey;
    position:relative;
    margin:0;
}

#header
{
    position:absolute;
    width:auto;
    min-width:100%;
    height:75px;
    background-color:yellow;
}

#wrap
{
    position:relative;
    width:auto;
    min-width:100%;
    height:auto;
    background-color:blue;
    margin:75px 0 0 0;
}

footer
{
    position:absolute;
    width:auto;
    min-width:100%;
    height:50px;
    background-color:black;
}

Answer 1

通过使用 vw/vh，我们可以根据视口(viewport)的大小调整元素的大小。在此 ID #wrap{} 中添加以下代码，Demo

min-height: 100vh;