CSS how to fill height of container?

Question

I have a container and two div inside it:

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:

100%: doesn't work, because the body get height of 500px from its parent (container) and overflow.
auto: body may be empty or only with some short content and in this case the body height will be lower than free container space.

How to fill the container with a fitting body?

This is the fiddle with the example:

#body{ height 100%; }

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

If your body is child of container tag, then height=100% should work. If not then you can go with JavaScript/jQuery — ankur140290, Nov 21 '15 at 10:29
I add the fiddle, as you can see the height 100% doesn't work because it overflow the container due to head height. — Tobia, Nov 21 '15 at 10:34
@Tobia something [like this?](http://jsfiddle.net/3eLvneh7/) — Vucko, Nov 21 '15 at 10:36

score 4 · Answer 1 · answered Nov 21 '15 at 10:44

4

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>

answered Nov 21 '15 at 10:44

Thomas

2,338
2
23
32

1

I love flexbox but still there is a [browser compability](http://caniuse.com/#feat=flexbox) issue regarding "old" IE versions. – Vucko Nov 21 '15 at 10:49
2

@Vucko I am trying to make the internet a better place by not supporting those old versions and forcing the user to update ;) (yeah, I know, not possible in many environments...) – Thomas Nov 21 '15 at 10:52
@Vucko Old IE's (without flexbox) represent only 2.23% of global use. The rest uses browser who do support flexbox. You do the math... – Rene van der Lende Nov 22 '15 at 00:46

score 1 · Accepted Answer · answered Nov 21 '15 at 10:43

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.

CSS how to fill height of container?

2 Answers2

Linked