Putting footer on the bottom of the page

Question

I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:

<div id="wrapper">
    <div id="header-wrapper">
    ...
    </div> <!--header-wrapper-->

    <div class="clear"></div>

    <div id="body-wrapper">
        <div class="row960">

            <div class="menu">...</div>

            <div class="content">...</div>

        </div> <!--row960-->
    </div> <!--body-wrapper-->

    <div class="clear"></div>

    <div id="footer-wrapper" class="gray">

    </div> <!--footer-wrapper-->

</div> <!--wrapper-->

and css:

.clear{
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:24px;
    margin:0px
}

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

body{
    background-color: #000000;
    color: #FFFFFF;
    font-size: 14px;
}

#wrapper{
    min-height: 100%;
    position: relative;
}

#header-wrapper{
    height: 100px;
}

#body-wrapper{
    padding-bottom: 50px;
}

#footer-wrapper{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

.row960{
    width: 960px;
    margin: auto;
    overflow: auto;
}

#menu{
    width: 200px;
    float: left;
}

.content{
    width: 740px;
    margin-left: 20px;
    float: right;
}

The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?

You can see my page on http://www.domenblenkus.com/fiap/notice.php

Thanks for your help!

EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.

possible duplicate of http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height/689290#689290. BTW the footer outght to be outsite the wrapper/container div as you can see in the example.. — DeiForm, Jul 31 '13 at 16:10

score 0 · Answer 1 · answered Jul 31 '13 at 16:12

0

If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.

answered Jul 31 '13 at 16:12

KnowHowSolutions

680
3
10

Thanks! But if the page is shorter than a screen, than the footer will be at the end of the page instead of on the bottom of the screen, thats why I use bottom:0 – Domen Blenkuš Jul 31 '13 at 16:16
Try using a `min-height:n px;` together with some js giving you the `window.height`. – Markus Hofmann Jul 31 '13 at 16:30
I agree here, if you want to fix the footer and switch based upon content length, then you'll need to use javascript. – KnowHowSolutions Jul 31 '13 at 16:34
Footer is on the end of row960, so it is OK, problem is that height of row960 is not right. – Domen Blenkuš Jul 31 '13 at 16:38

score 0 · Answer 2 · answered Jul 31 '13 at 16:37

You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/

Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.

Then in your CSS what you will need is to give them html and body elements a min-height: 100% You "container" element will also have min-height: 100%

You will then need to give your footer a heightof X, in my example it's 50 pixels. The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.

With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.

With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.

HTML:

<div id="container">
    <header>
        <p>Header</p>
    </header>
    <section>
        <p>Section</p>
    </section>
</div>

<footer>
    <p>Footer</p>
</footer>

CSS:

html, body, header, footer, section, p, div {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

p {
    padding: 5px 10px;
}

header {
    width: 100%;
    background: #f00;
    color: #fff;
}

section {
    width: 100%;
    height: 200px;
    background :#0f0;
    color: #fff;
}

#container {
    width: 100%;
    min-height: 100%;
    margin-bottom: -50px;
}

footer {
    width: 100%;
    background :#00f;
    color: #fff;
    height: 50px;
}

Thanks! I've tried this, but min-height of container looks like doesn't work, so footer is always on the bottom of the page, even if the page is shorter than a screen. — Domen Blenkuš, Jul 31 '13 at 16:51
If the page is longer than a screen, footer should be on the bottom of the page. But if the page is shorter than a screen, footer should be on the bottom of the screen. I hope that I've explained it well enough. — Domen Blenkuš, Jul 31 '13 at 16:56
I've figoure it out, it was just a little typo on my side. Now it is working as it should. Thanks a lot! — Domen Blenkuš, Jul 31 '13 at 17:23

score 0 · Answer 3 · answered Jul 31 '13 at 16:40

You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.

So, try this:

the CSS:

#footer-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
}

#body-wrapper {
    position: relative;
    height: 100%;
}

… and the JavaScript (jQuery):

var bodyWrap     = $('#body-wrapper'),
    footerWrap   = $('#footer-wrapper'),
    windowHeight = $(window).height();

var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());

if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);

Didn't test it due to little time.

Give it a try.

I would rather stay away form javascript if I can, but thanks anyway! — Domen Blenkuš, Jul 31 '13 at 16:52

Serlite · Accepted Answer · 2013-07-31T17:17:25.833

Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)

So, the HTML would look like (structure copied from your site):

<div id="wrappper">
    <div id="header-wrapper" class="gray">
    <div class="clear"></div>
    <div id="body-wrapper"></div>
    <div class="clear"></div>
    <div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>

Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".

Now, CSS you'll need to add (add to any current definitions if you already have them):

body, html{
    height: 100%;
}
#wrappper{
    min-height: 100%;
    margin-bottom: -50px;
    height: auto;
}
.spacer{
    height: 50px;
}

If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.

Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!

Thanks! That's what I was looking for. I was testing few solutions, so i changed nesting a bit, but now I am back to original. — Domen Blenkuš, Jul 31 '13 at 17:20

Putting footer on the bottom of the page

4 Answers4