How to make 100% div height between header and footer?

Question

Problem here: http://jsfiddle.net/x8XZ6/3/

HTML

<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>

CSS

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; min-height: 100%;
    height: 0;
    /* height: 0; interestingly, if height is set to 0, it expands 100% (see also #content margin-bottom) */
    /* but I need it to extend up to the blue bar only. */
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    position: absolute;
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    height: 100%;
    /* margin-bottom: -50px; can a negative margin work here? */
}

Can this be achieved without using absolute positioned header?

It is happening due to the `position: absolute;` in the `#anchored-footer{}` — Exploring, Jul 20 '14 at 13:35
Check if [**this**](http://jsfiddle.net/hari_shanx/x8XZ6/12/) helps. Have used calc to calculate the remaining height after reducing the header and footer height. — Harry, Jul 20 '14 at 13:40

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

You DO need to change BODY to height:100%;

working demo

css

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}

*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

getting the 110px in calc(100% - 110px) was tricky but this correctly addressed and fixed other issues. — Jake, Jul 20 '14 at 14:21

score 1 · Answer 2 · edited Jul 03 '16 at 18:11

1

I would recommend doing the below:

body {
    position: relative;
    min-height: 100%; /* to fill screen 100% even with less content */
    height: 100%; /* to allocate only 100% height */
}

#top {
    height: 50px;
    background-color: red;
    top: 0;
}
#anchored-footer { /* No absolute positioning */
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green;
    background-color: yellow;
    min-height: calc(100% - 110px); /* allocate the remaining height except the header + footer + borders and assign as minimum height */
    height: auto; /* allow content to expand when height exceeds the min height */
}

Demo | Demo with lot of content

edited Jul 03 '16 at 18:11

HEX

1,647
2
15
29

answered Jul 20 '14 at 14:01

Harry

87,580
25
202
214

Not exactly what I wanted, sorry. Needs to push the blue bar down when there are many content. – Jake Jul 20 '14 at 14:20
So you don't want a sticky footer you mean? – Harry Jul 20 '14 at 14:20
Nope, I wanted a footer anchored to the bottom, hence anchored-footer. – Jake Jul 20 '14 at 14:22
1

Ok, try [this](http://jsfiddle.net/hari_shanx/x8XZ6/19/). Normally the footer is fixed to bottom but when you add more content it allows the yellow content area to expand and gets pushed down. – Harry Jul 20 '14 at 14:26
Yes that worked, which is simlar to webkit's solution. – Jake Jul 20 '14 at 14:28
@Jake: Oh yeah, sorry didn't notice. Else, wouldn't have posted a different answer. – Harry Jul 20 '14 at 14:30

score 0 · Answer 3 · answered Jul 20 '14 at 13:42

0

If you ara not worrying about IE8 browsers then you can use calc property to achieve this.

 html, body{width:100%;}
 #content {
 border: 5px solid green;
 background-color: yellow;
 height:calc(100% - 110px); /* 50px header + 50px footer + 10px border */
 }

DEMO

answered Jul 20 '14 at 13:42

Suresh Ponnukalai

13,820
5
34
54

1

If content is very long, it does not push the blue footer downwards. – Jake Jul 20 '14 at 13:57

How to make 100% div height between header and footer?

3 Answers3

css

Linked