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

Question

The red is the header.
Then I have 5 rows, where I want to let use each 20% of the remaining space.
But instead it takes 20% of the window space. How can this be fixed?
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% is taken by header, so you have 90% of height for items (and not all 100%)...

Answer 2

Set the height of your items div to 90%.
Next to the header (10%) they will fill the screen. Then the .item divs will each take up to 20% of their parent (#items).
So try
#items {
position: relative;
width: 100%;
height: 90%;
}

Answer 3

You can do this with CSS tables.
1) Set display:table on the container and give it a background color (this will be the color of the header)
2) Set display:table-row on the header and items
FIDDLE
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#container {
display: table;
width: 100%;
height: 100%;
background: red;
}
#header {
display: table-row;
width: 100%;
height: 40%;
}
#items {
display: table-row;
height: 100%;
}
.item {
height: 20%;
width: 100%;
}
#item1 {
background: green;
}
#item2 {
background: blue;
}
#item3 {
background: orange;
}
#item4 {
background: purple;
}
#item5 {
background: brown;
}
<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>
NB: If CSS3 is an option this can also be done with flexbox.

Answer 4

I'd use flex boxes for this:
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#header {
flex: 0 0 auto; /* fixed height */
min-height: 10%; /* you don't need this? */
}
#items {
flex: 1 0 auto; /* take the remaining height (grow) */
display: flex;
flex-direction: column;
}
.item {
flex: 1 1 auto; /* distribute height equally, 20% height for 5 rows, 25% for 4 etc. */
}
(test)
For older browsers support you need to add prefixed version of the properties and the older properties (like box-orient)
Tables may do the job too, if you can live with their limitations with padding, margins and positioning

Answer 5

Height of items need to be 90% as 10% is already used by header part.