Question

我无法做对！内容部分应扩展到视图端口的100％（减去页眉/页脚）！如果内容很小，我喜欢看到顶部的标题，窗口视图底部的页脚，然后内容填充页眉和页脚之间的其余区域。有人可以给我一些神奇的CSS吗？我已经查看了很多有关此主题的SO帖子，无论出于何种原因都无法使其工作。我认为浏览器并不重要，但我至少尝试过最新的Chrome和IE 11。

如果你恰好是一个angularjs专家，我有另一个问题如下：如果内容angular将添加到DOM比原始模板更大，并且流程通过可视窗口区域，那么我看到一个快速闪烁页。它似乎首先以原始大小显示模板，然后当角度做它的东西时，它推动内容区域的大小向下通过可视窗口区域，但那里有一个小的烦人的闪烁。这与显示绑定表达式无关，因为我已经用ngCloak覆盖了它。

所有和任何评论都值得赞赏！

以下演示代码位于JSFiddle http://jsfiddle.net/ZuAjg/7/

HTML：

<div id="body_wrapper">
    <div>
        <div id="header">
            <p>Header</p>
        </div>
        <div id="content_wrapper">
            <div id="content">INHALT</div>
        </div>
    </div>
</div>
<div id="footer">
    <p>Footer</p>
</div>

CSS：

html, body {
    height:100%;
    text-align:center;
}
#body_wrapper {
    min-height:100%;
    height:100%;
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}
#header {
    background-color: orange;
    height:100px;
}
#content_wrapper {
    background-color: limegreen;
    height:100%;
    min-height:100%;
}
#footer {
    background-color: silver;
    height:1.5em;
    width:800px;
    margin: -1.5em auto;
}
* {
    margin:0;
    padding:0;
}

Answer 1

查看box-sizing：border-box;它也会做你需要的。

HTML：

<div id="body_wrapper">
    <div id="header">
        <p>Header</p>
    </div>
    <div id="content_wrapper">
        <div id="content">INHALT</div>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>    
</div>

CSS

html, body {
    height:100%;
    text-align:center;
}
#body_wrapper {
    min-height:100%;
    height:100%;
    overflow: hidden;
    width:100%;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
    position: relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding-top:100px;
    padding-bottom: 50px;

}
#header {
    background-color: orange;
    height:100px;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
}
#content_wrapper {
    background-color: limegreen;
    height:100%;
}
#footer {
    background-color: silver;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
* {
    margin:0;
    padding:0;
}

jsfiddle ：http://jsfiddle.net/8zQCq/

强制页面内容为视口的100％

1 个答案: