CODEWITHSUNDEEP
htmlcss
clankill3r
clankill3r

Reputation: 9533

height: 100% to use the remaining height?

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?

enter image description here

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/

Upvotes: 0

Views: 111

Answers (5)

nice ass
nice ass

Reputation: 16709

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

Upvotes: 1

Danield
Danield

Reputation: 125423

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.

Upvotes: 1

Mike Bovenlander
Mike Bovenlander

Reputation: 5416

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

Upvotes: 1

Pavan Kumar
Pavan Kumar

Reputation: 4800

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

Upvotes: 0

user4341206
user4341206

Reputation: 647

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

10% is taken by header, so you have 90% of height for items (and not all 100%)...

Upvotes: 2

Related Questions