Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm fairly good at getting stuff to work nicely as I come from a coding background, but I'm lacking in the design/visual department. I'm building a website for a friend and one of the things he wants is a footer at the bottom of every page with a few useful links in. Anyway when the page has a fair amount of content on it looks fine, always at the bottom of the page, but when there isn't that much on the page it appears where the content stops and cuts the page up, with a big unsightly gap underneath.

I tried looking for a few tutorials but the ones I did find either were for sticky footers which always stayed on the screen, or were poorly explained (in my opinion).

I've tried using min-height but then if the window is taller than min height I still get the unsightly gap. Is there a 'right' way to do this?

share|improve this question
6  
This might be better suited for SO, as it's a code-related question. –  Wayne Werner Aug 22 at 14:44
    
This is a CSS 'bug', and it has to do with its inability to vertically stretch. Generally, faking the background with a different element, but sometimes you have to use less fancy tricks. As Wayne mentions, if you share your code you should ask this in SO instead. –  Yisela Aug 22 at 14:44
    
I was debating which SE site to post this on, but I'll go ask them :) –  Adam Aug 22 at 14:46
    
Have you tried using height:100% to expand the content all the way down to the footer? –  Johannes Aug 22 at 16:35
1  
This question appears to be off-topic because it is about implementation (belongs on stack overflow) –  DA01 Aug 22 at 20:00

3 Answers 3

There's a few approaches you could take. First, and my favourite solution, is to have the html have the same background color as the bottom of my footer, so the transition isn't that obvious.

You could also use the vh unit, which corresponds to 1% of the height of the current viewport. It's not supported by all browsers or devices, but it does a decent job of always having something at the bottom of the screen (or below it).

share|improve this answer

This is a stack overflow question. Not graphic design.

But to answer it, you need to use javascript. After the page renders, calculate the height of the viewport, then calculate the height of the content area. Then use javascript to adjust the layout as needed.

I wouldn't recommend this, though. On the web, the footer is typically at the bottom of the content--not the bottom of the browser. This is where people expect it to be.

share|improve this answer

This is possible but a bit tricky. What you need is A html thst has 3 divs:

<div id="page">
  <div id="main">
    <p>This is the contents on the page</p>
  </div>
</div>

<div id="footer">
    <p>stuff</p>
</div>

Then the following css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#page {
    min-height: 100%;
}
#main {
    overflow: auto;
    padding-bottom: 100px;
}
#footer {
    background: #ccc;
    clear: both;
    height: 100px;
    margin-top: -100px;
    padding-top: 0;
    position: relative;
    width: 100%;
}

The idea is that #page flushes the footer down. The -100 margin-top gets it in the playing field. And the #main keeps the footer flushed if the page is too big for the content. If you add stuff in a div with padding inside the footer be sure to shorten the footer suitably.

Example on jsbin

Edity Edit

Or maybe you want it the other way around in which case. Just make html the color of your footer, then make the header white and let the footer be mostly normal.

Alternate example on jsbin

share|improve this answer
    
This is good, but it's a sticky footer. Apparently that is a problem based on the question. The user doesn't appear to want { min-height: 100%; } unless content is greater than screen height (see last line of question). –  Scott Aug 22 at 17:48
    
@Scott no i think what he means is that if you have a lot of text on the screen the text needs to push the footer down. If you put a lot of text the sticky footer will be pushed away. Could be wrong. –  joojaa Aug 22 at 17:52
    
Not sure. I read it as not wanting the gap when there's is not enough content to fill the page... my interpretation .... Basically jquery to clone and make a sticky footer but only if footer is below window height. –  Scott Aug 22 at 17:55
    
Well whats the problem with that? Just any webpage does this. Maybe he wants the footer grown to 100%? –  joojaa Aug 22 at 17:57
    
I'm not saying it's a problem.. the user asking the question is. –  Scott Aug 22 at 17:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.