CODEWITHSUNDEEP
css
Tobia
Tobia

Reputation: 9506

CSS how to fill height of container?

I have a container and two div inside it:

enter image description here

The container has a fixed 500px height. I don't know head's size, but I want to fill all the container height with body. I tried to set this height value to body:

How to fill the container with a fitting body?

This is the fiddle with the example:

#body{ height 100%; }

https://jsfiddle.net/s2ems5hm/1/

Upvotes: 1

Views: 5030

Answers (2)

Thomas
Thomas

Reputation: 2367

This is what flexbox was made for:

.container {
  display: flex;
  flex-direction: column;
  height: 500px;
  padding: 10px;
  background-color: yellow;
}

.header {
  background-color: lightblue;  
}

.body {
  flex: 1;  
  background-color: tomato;
}
<div class="container">
  <div class="header">Header<br>unknown<br>height</div>
  <div class="body"></div>
</div>

Upvotes: 4

Vucko
Vucko

Reputation: 20834

It's possible with display: table/table-row:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
    margin: 0;
}

.container{
    display:table;
    width: 100%;
    height: 500px;
    background-color: red;
    padding: 0 10px;
}

.head, .body{
    display: table-row;
}

.head{
    background-color: blue;
}

.body{
    background-color: yellow;
    height: 100%;
}
<div class="container">
    <div class="head">some head</div>
    <div class="body">foobar</<div>
</div>

JSFiddle

Also, I used box-sizing: border-box.

Upvotes: 1

Related Questions