CSS - Strech div to fill available height of the screen (header fixed height, footer unknown height)

Question

Basically I have this layout

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer">
        <img src="" alt=""/>
    </div>
</div>

And this CSS

#container {
    height: 100%;
}

#header {
    height: 8%;
}

#footer img {
    width: 100%;
    height: auto;
}

As you can see, the image in the footer has set width and relative height, which means the height of the footer will be whatever the height of the image will be depending on the screen width.

I need to stretch the content to the remaining height so the combined height of header, content and footer equals the height of the screen (no vertical scrolling).

I can easily do it with flexbox but I'm developing an app using Meteor.js and it will run in an environment, where flexbox might not be supported (older Android versions).

Answer 1

What you're looking for is known as "sticky footer".

WITHOUT FLEXBOX

This version is based on this answer

STANDARD DEMO

html, body {
    height: 100%;
    margin:0;
}


#container{
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}


#content{
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  background: turquoise;
}

#header {
    height: 8%;
}

h1{
  margin:0;
  padding:0;
}

#footer img {
    width: 100%;
    height: auto;
}

#footer{
  color:lightgrey;
  display: table-row;
}

---

WITH FLEXBOX

This version is based on this article

FLEXBOX DEMO

html, body, #container {
    height: 100%;
}


#container{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}


#content{
    flex: 1;
    background:tomato;
}

#header {
    height: 8%;
}

h1{
  margin:0;
  padding:0;
}

#footer img {
    width: 100%;
    height: auto;
}

#footer{
  color:lightgrey;
}

Answer 2

You could use CSS tables to accomplish this. Make #container display:table and the sub-divs display:table-row. Then if header and footer have a height, the content height will adjust accordingly. In this case, the height of #header is explicitly 8% and the height of #footer is determined by the height of the image.

html, body, #container {
    height: 100%;
    padding: 0;
    margin: 0;
}
#header, #content, #footer {
  display: table-row; 

}
#container {
    display: table;
    width: 100%;
}

#header {
    height: 8%;
    background-color: blue;
}

#content {
  background-color: yellow;
}

#footer {
    background-color: green;
}
#footer img {
  width: 100%;
}

Here's an example on jsfiddle. Try adjusting the width and height of the result window.