Sticky footer, or rather: content doesn't stretch down to footer

Asked 21/2, 2012 at 21:18 Answered 22/10, 2012 at 0:30

So I wanted a sticky footer on a page and got this one to work for me. All is well, but no, not really..

The problem is that I wanted the content above the footer to stretch all the way down to it. Now the box containing the main content end just after the text in the box, and there's a large space between the footer and the content. What I want is the background of the main content to stretch down to the footer! See my beautiful image!

footerproblem

This is what I have right now in html:

<div id="wrap">
  <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
  <!-- end header -->

  <!-- start main -->
  <div id="main">
    <div id="main-content">
    </div>
    </div>
  <!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>

And in css:

html {
   height: 100%; }

body {
  height: 100%;}

 /* wrap */
 #wrap {
   min-height: 100%; }

/* main */
 #main {
   background-color: #43145c;
   overflow: auto;
   padding-bottom: 50px; }

 #main-content {
   width: 720px;
   margin: auto;
   background-color: #643280;
   padding-top: 20px; }

#footer {
  position: relative;
  margin-top: -50px;
  height: 50px;
  clear: both;
  background: red; }

I tried setting min height of main to 100%, but didn't work. I just want the backgroundcolor of main-content all the way down to footer, since it's different to the body and main box.

Does it make any sense? Can anyone help?

Marmoreal answered 21/2, 2012 at 21:18 Comment(1)

setting the min height of main can't work out, because it's parent has no height set. – Surfing 21/2, 2012 at 21:24

I know this was asked 6 months ago, but I've been searching for the solution to this problem for quite a while now and hope other people can benefit from the solution I employed being archived. You were spot on when you said that somehow the main box needs to get the min-height of the space between the header and footer.

Unfortunately, I don't know how this can be done with pure CSS, it's quite easy with javascript of course but that solution is not always viable, and it's kind of messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack you can employ.

What I did was add an absolutely positioned element below body that essentially stretched from below the header to above the footer.This way I could add a background or a gradient on this #divBelowBody that essentially allowed me to pretend this problem is solved (although this solution leaves a bitter taste in my mouth).

In addition, if you wanted to add a border around your content div and were hoping that it extended to the footer even when content was small, you're screwed (although not really, I can probably think of a hack or two to make this workable), so it only works if you were hoping to add a background or gradient etc.

You can see the code in action here: http://jsfiddle.net/qHAxG/ Expand the result section horizontally to more clearly see what's going on.

Novella answered 2/9, 2012 at 8:41 Comment(0)

Try this:

Replace your HTML and BODY Styles in the Style Sheet with this:

html,body {height: 100%;}

Then replace your "wrapper" with this:

#wrap { min-height: 100%; height: auto; }

Hope that helps.

Giavani answered 21/2, 2012 at 21:27 Comment(2)

No, actually.. =( Somehow the main box needs to get the min-height of the space between the header and footer, but I have no idea how! – Marmoreal 21/2, 2012 at 21:39

@StinaQ: Add the min-height: height of footer; to the MAIN div and apply my answer to what is specified. Try it. and if all else fails.. Check this out: ryanfait.com/sticky-footer – Giavani 21/2, 2012 at 22:13

Try this

HTML

<body>
  <div id="wrap">
    <!-- start header -->
    <div id="header">
      <div id="header-content">
      </div>
    </div>
    <!-- end header -->

    <!-- start main -->
    <div id="main">
      <div id="main-content">
      </div>
    </div>
    <!-- end main -->

    <div class="push"></div>
  </div>

  <!-- start footer -->
  <div id="footer">
  </div>
</body>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
          height: 100%;
        }

        /* wrap */
        #wrap {
            background: green;
            height: auto !important;
            margin: 0 auto;
        }

        #wrap,
        #main, 
        #main-content {
            margin-bottom: -50px;
            min-height: 100%;
            height: 100%;

        }

        /* main */
        #main {
            background-color: #43145c;
        }

        #main-content {
            width: 720px;
            margin: 0 auto;
            background-color: #643280;
        }

        .push, #footer {
            height: 50px;
        }

        #footer {
            position: relative;
            background: red;
        }

Actin answered 21/2, 2012 at 21:51 Comment(0)

see THIS demo: it might be of use. It seems like you want a div with a background color to stretch to the bottom. But the problem with the sticky footer is that it stays at the bottom also - get's out of your way when the content extends past the view-port. So It needs some distance ( height of the content ) to know how when to do that. If that height isn't designated by actual content... 100% isn't really going to do the trick either. because then the "sticky" footer doesn't really work... it would be off the screen. What is it really 100% of ?

this whole thing has frustrated me for a year... but I always find a way to make it look the way I want even if I can't get it to function the way I want... hopefully that link demo above will maybe lend another piece to the puzzle. Good Luck !

Suburbia answered 22/10, 2012 at 0:30 Comment(0)

Recommended topics

Hot tags