logo标签列表

HTML5 + CSS3 如何设置高度为100%并带有边距？

htmlcss
4

假设有以下HTML布局：

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

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

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

我想让头部、主体和底部占据浏览器的全部高度，但实现这一点并不困难：
html, body { height:100%; }

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

我的问题在于，如果我想为body的每个子元素使用边距，那么这种方法就行不通：

body > * { margin:1%; }

无论是否有边距，网站应始终使用浏览器高度的100%。
编辑：似乎更适合我使用白色边框。但是，同样的问题仍然存在。在百分比中指定border-width是否可能？
你真的想在页眉和页脚中使用百分比吗？如果您使用下面所述的固定定位，就可以实现100％的页面高度，但是我无法想象您希望您的页眉和页脚增加高度的用户体验。 - iGanja
请记住，CSS 中的垂直边距和填充是基于元素的宽度计算的，而不是高度，因此您将无法通过期望的边距宽度来从高度中减去百分比，并希望一切都适合。不过，您可以尝试（1）为所有标题、节和页脚内容使用额外的内部 div，为父元素指定填充，或者（2）使用边框宽度和 box-sizing。p/s: 尝试使用透明边框 ;) - Terry
6个回答
2
我知道这看起来很荒谬、丑陋和愚蠢。实际上，确实如此。但是我找不到更好的方法来满足您的需求，而不使用丑陋的标记。
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

0

嗯，你试过像这样的东西吗？

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

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

:)

0

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

.site-header  { height:8%; }
.site-section { height:80%; }
.site-footer  { height:8%; }
你忘记考虑外边距折叠了。 - zzzzBov
那不起作用 - 仍然填充了超过浏览器高度的100%。 - 0xbadf00d
0

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

.site-header { height:10%; margin:1%;} --> 这将转换为 {height:12%}

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

.site-header { height : 8% }

或者使用作为包装器而没有边距（允许使用像素边距），并且不对标题、部分和页脚进行任何样式设置（如果我没错的话，这将有助于在旧浏览器上保持样式一致，特别是如果使用像 > 这样的选择器）。

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>
为子元素添加边距会导致它们溢出父容器，而填充则是一种解决方法。 - zzzzBov
0
你可以使用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及以上版本中正常工作。

2
我不太喜欢替代的盒子模型，而且这对IE不起作用（我也不太喜欢IE，但客户就是客户）。 - zzzzBov
@refhat; 请查看以下链接：http://www.css3.info/introducing-the-flexible-box-layout-module/，http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/。 - sandeep
0

这可以通过为页眉、页脚和边距使用固定定位和固定高度来轻松实现。

<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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接