CODEWITHSUNDEEP
htmlcss
Ashish
Ashish

Reputation: 2564

div at bottom of page

I have a div which I am using as a footer to display some content. I have put the style as:

.pageFooter{
    position:absolute;
    bottom:0px;
    width:100%;
    height:25px;
    background:#e6e6e6;
}

This style works well when there is not content in the body of page. But when I populate the page with content, say datagrid, the div is overlaps data in datagrid. What changes should I make to the style to let the div be at the bottom always. I am using IE* to view the pages.

Upvotes: 0

Views: 270

Answers (3)

Happy
Happy

Reputation: 891

The best method:

html, body { height: 100%; }

.wrapper {
    min-height: 100%;
    _height: 100%; /* hack for IE6 */
    margin-bottom: -100px; /* height of the footer */
}

.wrapper-inner { padding-bottom: 100px; }

.footer { position: relative; height: 100px; overflow: hidden; }


<body>
<div class="wrapper">
    <div class="wrapper-inner">
        Content
    </div>    
</div>
<div class="footer">
    Footer
</div>
</body>

Doctype should be strict or transitional xhtml.

Upvotes: 0

codingbadger
codingbadger

Reputation: 43974

This may help you http://www.cssstickyfooter.com/

Upvotes: 1

user47322
user47322

Reputation: 

body, html {
    height:100%;
    margin-bottom:25px;
}

Upvotes: 1

Related Questions