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%;
}

现在它起作用了！

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

body {
    margin: 0;
    padding: 0;
}

现在小提琴摇滚！

Answer 2

我不确定这是否能解决这个问题，但你说

我试图让文章占网站高度的 90%。所以我将 100% 的高度附加到身体和部分。当然，我给了文章 90% 的高度。

事实上，在你的 css 中，你给了 90% 的部分和 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%;
}

Answer 3

确保将正确的定位添加到

<section>

元素。这是一个更正的JSFiddle。我为您的部分元素更正了 CSS：

section { 
    position:absolute;
    width: 100%;
    height: 100%;
        background-color:red;
     }

原因很简单：只有正确定位的元素才允许其子元素继承高度和宽度属性。