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 cha开发者_StackOverflownges should I make to the style to let the div be at the bottom always. I am using IE* to view the pages.
body, html {
height:100%;
margin-bottom:25px;
}
This may help you http://www.cssstickyfooter.com/
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.
加载中,请稍侯......
精彩评论