html - 如何让文章占网站90%高度

Question

我有一个部分，其中有三个部分:

 <section id="home">

 <article id="rechts">
<h1>Übersicht</h1>
 </article>
 <article id="mitte">
<h1>Leute</h1>
 </article>
 <article id="links">
<h1>Links</h1>
 </article>

 </section>

我试着让文章占网站高度的 90%。所以我将 100% 的高度附加到主体和部分。当然，我给文章的高度设置为 90%。但不知何故它没有奏效。我知道 jquery 有非常简单的解决方案，但我想使用 css，谢谢

http://jsfiddle.net/g6JyD/

我的CSS:

body { width:100%;
    background-color:#ecf0f1;
    height: 100%; }

section { width: 90%;
    margin: 0px auto;
    height: 90%
     }

article {
    width:29%;
    font-family: 'Open Sans', sans-serif;
    float: left;
    margin: 5% 2% 10% 2%;
    padding: 0px;
    height: 100%;
}

#rechts {
    background-color: #9b59b6
}

#mitte {
   background-color:  #16a085;
}

#links {
    background-color: #f1c40f;
}

Answer 1

让我们也将 height: 100% 添加到 html 中:

html {
    height: 100%;
}

Now it works!

嘿，还是有问题。一些边距破坏了布局。我们将通过重置 body 默认边距和填充

来修复它

body {
    margin: 0;
    padding: 0;
}

现在 fiddle 石头!