Question

给出以下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百分比吗？

Answer 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

Answer 2

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

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

Answer 3

保证金总和达到高度。所以基本上你在做：

.site-header {height：10％;保证金：1％;} - ＆gt;这转换为{height：12％}

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

.site-header {height：8％}

或者使用没有边距的包装（允许px边距）并且根本不设置标题，部分和页脚的样式（如果我没有错，将有助于在旧版浏览器上保持样式一致，特别是如果使用选择器喜欢＆gt;）。

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>

Answer 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＆amp;上方。

Answer 5

毫米你有没有试过这样的东西？

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

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

：）

Answer 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;
}

HTML5 + CSS3 100％高度与边距

6 个答案:

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

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

这是一个Fiddle