HTML5 + CSS3 100% 带边距的高度答案

【问题标题】：HTML5 + CSS3 100% height with marginHTML5 + CSS3 100% 带边距的高度
【发布时间】：2013-05-11 15:41:36
【问题描述】：

给定以下 HTML 布局：

<body>
    <header class="site-header">
    </header>

    <section class="site-section">
    </section>

    <footer class="site-footer">
    </footer>
</body>

我想为页眉、节和页脚使用 100% 的浏览器高度。但是，实现这一点没有问题：

html, body { height:100%; }

.site-header  { height:10%; }
.site-section { height:80%; }
.site-footer  { height:10%; }

我的问题是，如果我想为body 的每个孩子使用边距，这将不起作用：

body > * { margin:1%; }

无论是否有边距 - 网站应始终使用 100% 的浏览器高度。

编辑： 改用白色边框似乎更适合我。然而，同样的问题仍然存在。甚至可以用百分比指定border-width？

【问题讨论】：

您真的想在页眉和页脚中使用百分比吗？如果您使用固定定位作为下面的一个答案，您可以实现 100% 的页面高度，但我无法想象您希望页眉和页脚增加高度的 UX。
请记住，CSS 中的垂直边距和内边距是根据元素宽度而不是高度计算的，因此您将无法通过所需的边距宽度从高度中减去百分比，并希望这一切都合适。但是，您可以尝试 (1) 为所有页眉、节和页脚内容使用额外的内部 div，并为父元素指定填充或 (2) 使用边框宽度和框大小。 p/s：尝试透明边框；）

标签： html css

【解决方案1】：

我知道这看起来很可笑、丑陋和愚蠢。事实上，它是。但我找不到更好的方法来准确地接近你想要的东西，而不会重复使用丑陋的标记。

HTML：

<header class="site-header">
</header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer">
</footer>

<div class="spacer"></div>

CSS：

html,body {height:100%;margin:0;} 
body > * { overflow:hidden;}
.spacer {height:1%;}
.site-header {height:8%;background-color:yellow; }
.site-section {height:78%;background-color:#ffcccc; color:#aaa;}
.site-footer {height:8%;background-color:#ccccff;}

DEMO

【讨论】：

【解决方案2】：

边距总和为高度。所以基本上你在做：

.site-header { 高度：10%; margin:1%;} --> 这转化为 {height:12%}

为了解决您的问题，您可以将边距计入元素：

.site-header { 高度 : 8% }

或者使用不带边距的包装器（允许 px 边距）并且根本不设置页眉、节和页脚的样式（如果我没有错，这也将有助于在旧浏览器上保持样式一致，特别是在使用选择器时喜欢 > )。

body > * > div {margin: 1%}
<body>
    <header class="site-header">
        <div class="inner_header">
        </div>
    </header>

    <section class="site-section">
        <div class="inner_section">
        </div>
    </section>

    <footer class="site-footer">
        <div class="inner_footer">
        </div>
    </footer>
</body>

【讨论】：

给子元素添加边距会从父元素中折叠出来，填充是一种方法

【解决方案3】：

只需从元素的高度中减去边距：

.site-header  { height:8%; }
.site-section { height:80%; }
.site-footer  { height:8%; }

【讨论】：

您忘记考虑边距折叠。
这不起作用 - 仍然会填充超过 100% 的浏览器高度。

【解决方案4】：

您可以为此使用 css3 FLEX 属性：

body {
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
    width:100%;
}
body header,body section, body footer{
    display:block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
header{
    background:red;
    height:10%;
}
section{
    background:green;
    -webkit-box-flex: 3;
     -moz-box-flex: 3;
}
footer{
    background:yellow;
    height:10%;
}
html, body{
    height:100%;
    margin:0;
    padding:0;
}

http://jsfiddle.net/XMg2h/14/

更新：

http://jsfiddle.net/XMg2h/15/

在 IE8 及更高版本之前都可以使用。

【讨论】：

我不太喜欢替代盒子模型，这对 IE 不起作用（也不太喜欢 IE，但客户就是客户）。
@refhat;检查这些链接css3.info/introducing-the-flexible-box-layout-module，w3.org/TR/2011/WD-css3-flexbox-20111129

【解决方案5】：

mmmm 你试过这样的东西吗？

cssSelector{width:200px; border:20px; box-sizing:border-box}

关键是box-sizing，如果我们不使用它最终宽度等于220px，但是当我使用box-sizing时最终宽度等于200px，所以，你可以试试看会发生什么。

:)

【讨论】：

【解决方案6】：

使用页眉、页脚和页边距的固定位置和固定高度可以轻松实现这一点。

<body>
    <header class="site-header"></header>
    <section class="site-section"></section>
    <footer class="site-footer"></footer>
</body>

html {
    height:100%;
}
body {
    padding:0;
    margin:0;
}
body > * {
    position:fixed;
    margin:5px 0;
    width:100%
}
.site-header {
    top:0px;
    height:80px;
    background:red;
}
.site-section {
    top:85px;
    bottom:85px;
    background:green;
}
.site-footer {
    bottom:0px;
    height:80px;
    background:blue;
}

这是一个Fiddle

【讨论】：