Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Sticky Footer - With Margin

I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/

It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px} or doing container {margin-top:34px}.

However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.

Any ideas?

Here's a Fiddle example: http://jsfiddle.net/jrZKb/

like image 381
djt Avatar asked Apr 09 '13 04:04

djt


People also ask

How do you make a footer sticky in CSS?

Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body . Apply margin-top:auto the footer . You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom.

How do I stick footer to the bottom when page content is less?

Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.

How do you make a footer stick to the bottom of the page?

Set margin on the footer Because you set the Body — the footer's parent element — to Flex, you can set the top margin on the footer element to Auto. This makes the footer push away from the content above, causing the footer to stick to the bottom of the page.

How do I keep the footer at the end of the page?

Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .


1 Answers

Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):

http://jsfiddle.net/jrZKb/1/

<body>
    <header> Header</header>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
header
{
    background-color: green;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
}
like image 129
Alyce Avatar answered Sep 25 '22 14:09

Alyce