Keeping footer at the bottom of the page
Question
When I use bottom:0; , if I don't have enough content the footer is where it should be but if I have content that the user has to scroll on the page, the footer stays in place and once scrolled, the footer is in the middle of the screen.
When I don't use bottom:0; and I do have content that fills the screen, the footer is where it should be, but if I don't have enough content, the footer is not where it should be and somewhere in the middle of the page.
They both work but only when certain conditions are met. How can I have it always at the bottom where it should be with content or without?
.footer{
background-color:#99C;
background-repeat: repeat;
width:100%;
position:absolute;
bottom:0;
}
html,body{
padding:0;
height:100%;
width: 100%;
margin:0;
}
1 answers
solution1
4 2012-08-14 20:55:11
Here, try this website , it explains how to do it.
Also, an example
HTML :
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
html,body {
margin:0;
padding:0;
height:100%;
}
div#container {
position:relative;
margin:0 auto;
width:750px;
height:auto !important;
height:100%;
min-height:100%;
}
div#header {
height:150px;
background-color:red;
}
div#content {
padding-bottom:150px;
height:800px;
background-color:green;
}
div#footer {
position:absolute;
width:100%;
bottom:0;
height:150px;
background-color:blue;
}
JSFiddle : http://jsfiddle.net/gdy8K/
Note that the #header and #content height are simply there to make the div use some space. The #footer space though, is necessary and should match the #content padding-bottom . background-color are also there only for the sake of the demonstration.
You should also note that if you are using asp.net, do not forget that your content usually is in a form tag. You'll have to add form in the first css rule, like this
html,body,form {
margin:0;
padding:0;
height:100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.