HTML5 + CSS3 100％高度带边距 [英] HTML5 + CSS3 100% height with margin
问题描述
给定以下HTML布局：
Given the following HTML layout:
<body>
<header class="site-header">
</header>
<section class="site-section">
</section>
<footer class="site-footer">
</footer>
</body>
我想使用浏览器高度的100％作为标题，节和页脚。但是，没有问题实现：
I want to use 100% of the browser height for the header, section and footer. However, there's no problem to achieve that:
html, body { height:100%; }
.site-header { height:10%; }
.site-section { height:80%; }
.site-footer { height:10%; }
我的问题是，如果我想为每个孩子使用保证金， 身体：
My problem is, that this won't work if I want to use a margin for each child of body:
body > * { margin:1%; }
无论是否有边际 - 网站应始终使用浏览器高度的100％ 。
No matter if there's a margin or not - the site should always use 100% of the browser height.
编辑：
这似乎更适合我使用白色边框。然而，同样的问题仍然存在
It seems to more suitable for me to use a white border instead. However, same problem remains. Is it even possible to specify border-width in percent?
推荐答案
是否可以指定 border-width 我知道这将看起来可笑和丑陋，和愚蠢。其实，它是。但我找不到更好的方法来准确地处理你想要的，而不会再次出现丑陋的标记。
I know this will look ridiculous and ugly, and stupid. Actually, it is. but i couldn't find a better way to approach exactly what you want without recurring to ugly markup.
HTML：
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;}
这篇关于HTML5 + CSS3 100％高度带边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
