CODEWITHSUNDEEP
htmlcss
user2178841
user2178841

Reputation: 859

Footer not sticking

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

Upvotes: 0

Views: 160

Answers (4)

Spacemile
Spacemile

Reputation: 367

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

Upvotes: 1

frogatto
frogatto

Reputation: 29285

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

Upvotes: 1

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Try this one.....

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

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

Upvotes: 2

user2568107
user2568107

Reputation:

Use this css:

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

Upvotes: 1

Related Questions