给出以下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
百分比吗?
答案 0 :(得分: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;}
答案 1 :(得分:0)
只需从元素的高度中减去边距:
.site-header { height:8%; }
.site-section { height:80%; }
.site-footer { height:8%; }
答案 2 :(得分:0)
保证金总和达到高度。所以基本上你在做:
.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>
答案 3 :(得分: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;
}
<强>更新:强>
直到IE8&amp;上方。
答案 4 :(得分:0)
毫米你有没有试过这样的东西?
cssSelector{width:200px; border:20px; box-sizing:border-box}
关键是 box-sizing ,如果我们不使用它,最终宽度等于220px,但当我使用 box-sizing 时,最终宽度等于200px,所以,你可以尝试看看会发生什么。
:)
答案 5 :(得分: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;
}