Sticky footer & 100% height - force div to get 100% height

Question

Please look at code: http://jsbin.com/jeduvowa/1/

How to force pink div to get 100% height (div should touch footer even if it doesn't contain enough content)

Answer 1

You must simply set height: 100; to body, html and content. You are overwriting height: 100%; by height: auto !important;.

Or, if you wan to be Content growable, you can create two layers. One with Content and second wirh Background.

Answer 2

You can do this:

HTML:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.header {
  background: red;
}
.wrapper {
    height: 100%;
    margin: 0 auto -40px;
    background: gray;
}
.content {
  width: 200px; 
  margin: 0 auto; 
  background: pink; 
  height: calc(100% - 18px); /*100% - the height of the header*/
}

.footer {
  background:green;
}
.footer {
    height: 40px;
}