Как сделать статьи 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% от высоты участка. SO я добавил 100% высоты к телу и секции. И, конечно же, я дал articales высоту 90%. Но почему-то это не сработало. Я знаю, что есть очень простые решения с JQuery, но я хочу использовать CSS Thanks

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 скалы!

Answer 2

Я не уверен, если это будет исправить это, но вы сказали

Я попытался сделать статьи 90% от высоты участка. SO я добавил 100% высоты к телу и секции. И, конечно же, я дал articales высоту 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; 
    } 

Аргументация проста: только правильно расположены элементы, чтобы их дети наследуют высоту и ширину атрибутов.