[Solved] How to make footer floating at bottom of page

[mika]

Hi folks,

i’m coding responsive site with skeleton framework (http://testi3.aada.fi/index.html) for customer that now wants its footer to float at the bottom of page no matter height of the page.

How i’m gonna do this..? when

.site-footer { position: fixed; bottom:0px; }

destroys everything and my responsive nav just disapers ;-)

// Mika

[Paulie_D]

position: fixed;
Width: 100%;
bottom: 0;

Doesn’t work?

[jaycrisp]

Do you mean a sticky footer?

https://css-tricks.com/snippets/css/sticky-footer/

[mika]

Thx for replies guys!

I find solution..Hail to the Paulie_D !!..

// Mika

[mika]

Hi guys! :-)

Paulie’s code worked great on my index page, but somehow same code on my content page
did not:

index page: http://testi3.aada.fi/index.html
content page: http://testi3.aada.fi/me.html

this is weird coz pages use same code for footer:

.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px;
}

.container:after {
content: “”;
display: block;
}

.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;

}

.site-footer {
background-image: url(../images/footer_bg_trans.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}

what i have missed ?

// M

// Mika

[Tomasz Lisiecki]

Hi ;)

I just had a quick glance at your code as I am in a little rush (working :P). Quick thing I noticed is that .ten wrapper element in your <footer> on /me.html page isn’t stuck to the bottom of the screen. This causes the navigation to fall out from the gray area.

Quick (and probably lame) solution would be to do:

.ten {
         position: relative;
     bottom: -20px;
}

Also I noticed that footer links on me.html are using different font family. I am not sure why. I bet both issues are caused by some CSS declarations missing or markup error (which can also be clash of classes or invalid order of elements…).

Hope it points you into the right direction or someone else can have a deeper look into your code.

I’m off! :)

[Author]

Posts