L

6

12

Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just gets stretched.

However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal.

What's the proper way to do this with CSS? Do I need Javascript/jQuery to make this happen?

I only care about IE9+ and modern versions of other browsers. The height of the footer can change from page to page too, so I'd like to not rely on the height.

Lurlenelurline answered 12/11, 2012 at 18:1 Comment(2)

You can help yourself by showing what HTML and CSS you used. – Methinks 12/11, 2012 at 18:43

Why does your footer vary from page to page? (But since it does, how significant is the change of footers between pages?) – Wellfavored 12/11, 2012 at 20:6

U

13

Check out this site. He has a good tutorial on how to do this with css.

I copied his css just in case Matthew's site is taken down.

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;
}

EDIT

Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});

Upraise answered 12/11, 2012 at 18:33 Comment(1)

Looks like it requires me to know the height of my footer, might be very difficult for my situation. – Lurlenelurline 12/11, 2012 at 19:2

G

2

Give this a try.

It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. It is a little hacky, and requires you to know the height of your footer (which may not work for your use case)

Markup

<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>

<footer>
  <p>footer-text</p>
  <img src="http://placekitten.com/100/100" alt="footer image">
</footer>

CSS (well, scss)

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

The important things here seem to be:

Setting height: 100% on containing elements (esp html and body)
Knowing the height of your footer, and accounting for it with a "push" element
using the combination of min-height height: auto !important and height:100%

Hope that helps!

Geographer answered 12/11, 2012 at 18:37 Comment(0)

M

0

HTML

<body>
    <div class="example">
        <p>Lorem ipsum dolor sit amet consectetur...</p>
    </div>

    <footer>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </footer>
</body>

CSS

body {
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

Mingrelian answered 7/12, 2015 at 22:54 Comment(0)

A

0

Considering that all your footer is inside the <footer> html tag, this is an easy solution using jQuery.

JS:

$(document).ready(function(){
    $('body').css('padding-bottom', $('footer').height()+'px');
});

CSS:

footer {
    position:absolute;
    bottom:0;
}

Akanke answered 21/5, 2018 at 18:49 Comment(0)

T

-2

No it's very easy set a minimum for your body height.

like this: min-height:500px; then the min height is 500px.

Towrope answered 12/11, 2012 at 18:6 Comment(1)

I don't know the height of the window and the other elements though. – Lurlenelurline 12/11, 2012 at 19:1

D

-3

use min-height property, though not entirely reliable as some older versions may not support it. Throw in some javascript if you dont mind.

Droplight answered 12/11, 2012 at 18:10 Comment(0)

Markup

CSS (well, scss)

Recommended topics

Hot tags