html - 高度 : 100% to use the remaining height?

Question

红色的是标题。 然后我有 5 行，我想在其中使用剩余空间的 20%。 但是它占用了 20% 的窗口空间。如何解决？

html:

<div id="container">
    <div id="header"></div>
    <div id="items">
        <div class="item" id="item1"></div>
        <div class="item" id="item2"></div>
        <div class="item" id="item3"></div>
        <div class="item" id="item4"></div>
        <div class="item" id="item5"></div>
    </div>
</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden; 
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#header {
    position: relative;
    width: 100%;
    height: 10%;
    background: red;
}

#items {
    position: relative;
    width: 100%;
    height: 100%;
}


.item {
    height: 20%;
    width: 100%;
}

#item1 {
    background: green;
}

#item2 {
    background: blue;
}

#item3 {
    background: orange;
}

#item4 {
    background: purple;
}

#item5 {
    background: brown;
}

http://jsfiddle.net/clankill3r/dabrm8js/

Answer 1

#items {
    position: relative;
    width: 100%;
    height: 90%;
}

10% 被标题占用，所以你有 90% 的高度用于元素(而不是全部 100%)...