HTML5 + CSS3 100%高度与边距

时间:2011-12-02 15:19:58

标签: html css html5 css3

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

6 个答案:

答案 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;}

DEMO

答案 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;
}

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

<强>更新:

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

直到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;
}

这是一个Fiddle