Footer not sticking

Question

Just another "Sticky Footer" problem.

HTML:

<body id="mainbody">
<div class="wrapper">
<div id="header">
</div>
<div id="navbar">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>

<div class="push"></div>

</div>

<div class="footer">
<p>&copy LOREM IPSUM DOLOR ...</p>
</div>

Css:

    .footer {
        text-align:center;
        color:#ffffff;
        position: relative;
        z-index: 10;
        margin-bottom: 0px;
        line-height:30px;
        width:1100px;
        left:100px;
        border:1px solid #777777;  
        background:#261f1f;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow: 5px 5px 5px #000000;
        -webkit-box-shadow: 5px 5px 5px #000000;
        box-shadow: 5px 5px 5px #000000;
    }
    /*Footer to buttom*/
    html, body {
    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -32px;
    }
    .footer, .push {
    height: 30x;
    clear:both;
    }

I have read many posts here on this site and other. When I use position: fixed in footer, the footer sticks to bottom of browser "window" or "screen". It remains there whether I rescale or move. This covers main content but at least stays at bottom always

When I use position: relative; it stays at the bottom if the scroll bar is at top. But as I scroll bar down, the footer moves over the main content, not even at the bottom.

enter image description here

What mistake did I make? I want the footer to stay at bottom: below all contents of the page.

Here is what happens on using fixed: enter image description here

If you do not want `position:fixed` you should have some JS or jQuery code — frogatto, Jul 20 '13 at 09:27
@Cherniv and ABFORCE What does sticky mean? I meant that I want the footer to go to bottom of **Page, not window**. — user2178841, Jul 20 '13 at 09:32
Possible duplicate of :http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly?rq=1 — Hashem Qolami, Jul 20 '13 at 09:38
@HashemQolami, yes! but the problem is that I am here after using that thread. It is not duplicate. The best suggestion there is not working here. It's not duplicate!!! — user2178841, Jul 20 '13 at 09:40
@Cherniv, that's exactly what is happening with "position:fixed". I don't want that. I want it to go to bottom of page. — user2178841, Jul 20 '13 at 10:02

score 2 · Answer 1 · answered Jul 20 '13 at 09:36

2

Try this one.....

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

answered Jul 20 '13 at 09:36

Ganesh Rengarajan

2,006
13
26

kam nahi kar raha he, bhai, wo to position relative karna jeisa hai, mere page me. – user2178841 Jul 20 '13 at 09:55
1

k onum puriala puriaramari ethavathu podu – Ganesh Rengarajan Jul 20 '13 at 09:56

score 1 · Answer 2 · answered Jul 20 '13 at 09:25

1

Use this css:

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

answered Jul 20 '13 at 09:25

I meant that I want the footer to go to bottom of **Page, not window**. – user2178841 Jul 20 '13 at 09:34
Then do bottom of whatever you want and it will move it up the page to where you want – Jul 20 '13 at 09:34

frogatto · Accepted Answer · 2013-07-20T10:13:41.740

1

Use tag footer, This cause the contents of this tag stickly stay on the bottom of page not window

<footer>
    <div class="footer">
        <p>&copy LOREM IPSUM DOLOR ...</p>
    </div>
</footer>

w3schools : LINK

UPDATE:
Add this script:

  $(document).ready(function(){
        if( $(document.body).height() < $(window).height() )
        {
            $("div.footer").css("top" , $(window).height() - $("div.footer").outterHeight() + "px");
        }
    });

And remove any position related property form .footer in CSS

edited Jul 20 '13 at 10:13

answered Jul 20 '13 at 09:43

frogatto

28,539
11
83
129

no mate! that's not working. It stays at top:0;left:0; position. I mean In my case. – user2178841 Jul 20 '13 at 09:53
@user2178841 :Not working!! This is a standard HTML tag, Please tell me what do you want to do exactly? – frogatto Jul 20 '13 at 09:55
@user2178841: I understand your problem! I found a solution with some JS/jQuery code. if you are ok with this way, tell me to put it here – frogatto Jul 20 '13 at 10:03
I would appreciate that. Thanks. – user2178841 Jul 20 '13 at 10:06
@user2178841: It's here, Please test it now – frogatto Jul 20 '13 at 10:14
It works.
tag works too! I realized the actual problem with MY PAGE. and yet I don't know how to fix it. All of the contents including header have position:absolute. That is the reason why the html disregards the contents and starts the footer from beginning: reason for getting the footer at top even with footer tag. Don't know how to tell HTML to sent footer even below absolutely positioned contents.
– user2178841 Jul 20 '13 at 10:29
@user2178841: I think this is not possible without some JS/jQuery code – frogatto Jul 20 '13 at 10:34
@user2178841: My recommend is never use `absolute` positioning unless really needed – frogatto Jul 20 '13 at 10:39

score 1 · Answer 4 · answered Jul 20 '13 at 11:01

1

Here is a good example of how to make sticky footer http://ryanfait.com/sticky-footer/

answered Jul 20 '13 at 11:01

Spacemile

367
1
5
15

Footer not sticking

4 Answers4