how to make DIV height 100% between header and footer

Question

Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px?

I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times

http://stackoverflow.com/questions/6158975/css-100-height-layout — Samich, Apr 19 '12 at 12:45
What behaviour would you want if the content in the body overflowed the screen height? — bendataclear, Apr 19 '12 at 12:45

WolvDev · Accepted Answer · 2016-04-27T13:03:55.030

18

I created an example in jsfiddle:

UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/

HTML:

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS:

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.

edited Apr 27 '16 at 13:03

answered Apr 19 '12 at 12:56

WolvDev

3,182
1
17
32

1

Would be nice to [include some code here](http://stackoverflow.com/a/12907900/1269037) in case JSFiddle isn't available. BTW, the `box-sizing: border-box;` doesn't seem to make any difference. – Dan Dascalescu Oct 16 '12 at 05:12
1

Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside. – WolvDev Oct 16 '12 at 06:27
1

That doesn't work when scrolling, the footer scrolls with the content. – Roaders Jan 20 '16 at 10:28
1

Not a very good example this, it just scrolls past the footer bar! – Roger Far Apr 14 '16 at 21:29

score 4 · Answer 2 · answered Apr 19 '12 at 13:17

4

Just a fix for Andreas Winter solution:

http://jsfiddle.net/5V288/7/

*With the solution of it, you would have problems if the content is greater than the available window area.

answered Apr 19 '12 at 13:17

Oswaldo Acauan

2,730
15
23

1

Thanks for this - I was struggling with fixed header and footer with scrollable 100% center area. This is perfect, can now have EPIC layouts!!! ^__^ – Jason May 25 '13 at 20:12
yayyyyyyy, im glad to help you :3 – Oswaldo Acauan May 27 '13 at 19:26

score 4 · Answer 3 · answered Oct 16 '12 at 05:12

I think what you're looking for is "multiple absolute coordinates". A List Apart has an explanation here but basically, you just need to specify the body's position as absolute, and set both top: 50px and bottom: 50px:

<body>
<style>
#header {
  position: absolute;
  height: 50px;
} 

#body {     
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  position:absolute;
  height: 50px;
   bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>

http://www.spookandpuff.com/examples/absoluteCoordinates.html shows the technique in a prettier way.

how to make DIV height 100% between header and footer

3 Answers3

Linked