How to keep footer at bottom of screen

What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?

348455 次浏览
小开

set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows

小开

use this style

min-height:250px;
height:auto;
小开

You could use position:fixed; to bottom.

eg:

#footer{
position:fixed;
bottom:0;
left:0;
}
小开
最佳答案

What you’re looking for is the CSS Sticky Footer.

* {
margin: 0;
padding: 0;
}


html,
body {
height: 100%;
}


#wrap {
min-height: 100%;
}


#main {
overflow: auto;
padding-bottom: 180px;
/* must be same height as the footer */
}


#footer {
position: relative;
margin-top: -180px;
/* negative value of footer height */
height: 180px;
clear: both;
background-color: red;
}




/* Opera Fix thanks to Maleika (Kohoutec) */


body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/* thank you Erik J - negate effect of float*/
}
<div id="wrap">
<div id="main"></div>
</div>


<div id="footer"></div>

小开

HTML

<div id="footer"></div>

CSS

#footer {
position:absolute;
bottom:0;
width:100%;
height:100px;
background:blue;//optional
}
小开

Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.

css:

<style>
body {
margin: 0 0 20px;
}
.footer {
position: absolute;
bottom: 0;
height: 20px;
background: #f0f0f0;
width: 100%;
}
</style>

Here is the html main content.

<div class="footer"> Here is the footer. </div>

提交答案