强制页面内容为视图端口的100%

Force page content to be 100% of view port

本文关键字：视图 100%      更新时间：2024-04-02

我就是做不好！内容部分应扩展到视图端口的100%（减去页眉/页脚）！如果内容很小，我喜欢在窗口视图的顶部看到页眉，在底部看到页脚，然后内容填充页眉和页脚之间的其余区域。有人能给我一个神奇的CSS吗？我看了很多关于这个话题的so帖子，但无论出于什么原因，我都无法让它发挥作用。我认为浏览器无关紧要，但我至少尝试过最新的Chrome和IE 11。

如果你碰巧是angularjs专家，我的另一个问题是：如果angular将添加到DOM中的内容比原始模板大得多，并且流经过可查看的窗口区域，那么我会看到页面上快速闪烁。它似乎首先以原始大小显示模板，然后当angular做它的事情时，它将内容区域的大小向下推过可视窗口区域，但那里有一个小的令人讨厌的闪烁。这与绑定表达式的显示无关，因为我已经用ngCloak介绍过了。

欢迎所有评论！

以下演示代码位于JSFiddlehttp://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;
}

查看框大小：边框框；它也能满足你的需要。

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/

相关文章：