CODEWITHSUNDEEP
csspositioningcss-positionfooter
H Bellamy
H Bellamy

Reputation: 22705

Make div stay at bottom of page's content all the time even when there are scrollbars

I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.

I have a div with id="footer" and the following CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.

How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.

Image: Example

Upvotes: 337

Views: 956809

Answers (11)

My Head Hurts
My Head Hurts

Reputation: 37665

Unfortunately, you can't do this without adding a little extra HTML and having one piece of CSS rely on another.

HTML

First, you need to wrap your header,footer and #body into a #holder div:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.

Now set min-height: 100% on the #holder div so it fills the content of the screen and uses position: absolute to sit the footer at the bottom of the #holder div.

Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Working example, short body: http://jsfiddle.net/ELUGc/

Working example, long body: http://jsfiddle.net/ELUGc/1/

If you are having problems in asp.net, you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags for this to work.

Upvotes: 217

Milkdromeda
Milkdromeda

Reputation: 27

I hit my footer with a margin-top: auto and it did the trick! Im commenting this here just in case it could help any future visitors.

Upvotes: 0

Praveen Kundu
Praveen Kundu

Reputation: 29

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

Upvotes: 2

Anonymous
Anonymous

Reputation: 1435

Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

for html layout

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer

Upvotes: 19

Tim L
Tim L

Reputation: 171

I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!

This is because setting height: 100% only picks up parent div's height!

So if your entire html (inside of the body) looks like the following:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Then the following will be fine:

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

...as "holder" will pick up it's height directly from "body".

Kudos to My Head Hurts, whose answer was the one I ended up getting to work!

However. If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing element also has height: 100% set on the div. Otherwise, the information on height will be lost between "body" and "holder".

E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

And remember to set height on full-height class in the css:

#full-height{
    height: 100%;
}

That fixed my issues!

Upvotes: 1

AlexHighHigh
AlexHighHigh

Reputation: 350

You didn't close your ; after position: absolute. Otherwise your above code would have worked perfectly!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

Upvotes: 8

David B
David B

Reputation: 11

I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag. I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).

Upvotes: 1

George Carlin
George Carlin

Reputation: 447

if you have a fixed height footer (for example 712px) you can do this with js like so:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

Upvotes: 0

Obromios
Obromios

Reputation: 16373

This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

Upvotes: 2

Tarciso Junior
Tarciso Junior

Reputation: 549

I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:

Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag: 

<meta name="viewport" content="width=device-width, user-scalable=no">.

see http://caniuse.com/#search=position

Upvotes: 5

Joseph Silber
Joseph Silber

Reputation: 219920

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

Upvotes: 696

Related Questions