I would like to have a CSS layout with 100% body height

Question

I've been making some great progress so far. I have the sticky footer working the way I would like i.e.

If there is little content show a footer on the screen. If there is lots of content push it down :)

So what I'm trying to do Is to have a nice little border around my body content, until it reaches the footer :)

Alas I've not been able to do that and I've only been able to make it do this: http://jsfiddle.net/dcf104/ZQEGw/

Can you adise me on some additional code?
Maybe I need some extra <divs>?

You can see the red sides only go so far...

How can I make them go all the way to the footer?

Many Thanks, and your help is much appreciated

score 1 · Answer 1 · answered Aug 17 '13 at 15:15

1

Set .page-wrap like that:

.page-wrap {
      margin-bottom: -180px;
      height: 100%;
 }

http://jsfiddle.net/ZQEGw/1/

answered Aug 17 '13 at 15:15

The one problem with this is that when you then have long content it goes behind the footer :( http://jsfiddle.net/dcf104/ZQEGw/14/ – Dominic Francis Aug 18 '13 at 12:38

score 0 · Answer 2 · edited May 23 '17 at 12:03

This article describes a sticky footer:

with little content show footer on the screen - i assume you mean at the end of the viewport (what is the viewport,article about viewport)
push the footer down if content fills the viewport

You can take a look at the gist or the example on codepen

The CSS

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px;  /* Height of the footer */ }
#footer { position:absolute; bottom:0; width:100%; height:60px;         
            /* Height of the footer */ background:#6cf; }

The basic html structure

   <div id=container>
     <div id=header>
     </div>
     <div id=body>
     </div>
     <div id=footer>
     </div>
   </div>

I would like to have a CSS layout with 100% body height

2 Answers2