CODEWITHSUNDEEP
css
user1039523
user1039523

Reputation: 111

Footer not aligning to bottom of screen when position absolute is used

I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.

<div class="content-wraper">
    <div class="side-nav"></div>
</div>

<div class="footer"></div>​

.content-wraper {
    background-color:blue;
    min-height:100px;
    position:relative;
    width:500px;
}

.side-nav {
    background-color:red;
    height:3000px;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
}

.footer {
    background-color:black;
    position:absolute;
    bottom:0px;
    width:200px;
    height:50px;
}

Upvotes: 0

Views: 756

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Change position: absolute; in .footer to position: fixed;

Updated fiddle

UPDATE

To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:

$(".footer").css("top", $(".side-nav").height());

Example Fiddle

Upvotes: 5

LorDex
LorDex

Reputation: 2636

absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.

Try different approach:

sticky footer

Upvotes: 1

Related Questions