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

closed as off-topic by Scott, Johannes, Zach Saucier, Vincent May 4 at 10:09

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This appears to be a tech support question about fixing technology to work as advertised. Please edit the question so that it pertains to using technology to solve a design problem. You may want to check if it hasn't already been asked in Super User. In many cases, contacting the manufacturer is the quickest option." – Scott, Johannes
If this question can be reworded to fit the rules in the help center, please edit the question.

6  
This might be better suited for SO, as it's a code-related question. –  Wayne Werner Aug 22 '14 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 '14 at 14:44
1  
From a design standpoint, this is (typically) bad design. Web sites don't have footers at the bottom of the browser. THey have footers at the bottom of the content. –  DA01 Aug 22 '14 at 19:59
1  
This question appears to be off-topic because it is about implementation (belongs on stack overflow) –  DA01 Aug 22 '14 at 20:00
1  
I'm voting to close this question as off-topic because this question belongs on StackOverflow –  Zach Saucier May 1 at 23:02

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 that 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 '14 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 '14 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 '14 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 '14 at 17:57
    
I'm not saying it's a problem.. the user asking the question is. –  Scott Aug 22 '14 at 17:58

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