CSS to make HTML page footer stay at bottom of the page with a minimum height
I had the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer that I can't make sit at the bottom of the page.
The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.
Make the body 100% of your page, with a min-height of 100% too.
The footer is then given negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
A very simple approach which works great cross browser is this:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
From IE7 onwards you can simply use
#footer {
position:fixed;
bottom:0;
}
See caniuse for support.
链接地址: http://www.djcxy.com/p/23728.html