如何保持页脚底部

设置网页的最佳做法是，如果网页上显示的内容/文本非常less，则页脚显示在浏览器窗口的底部，而不是网页的一半。

Answer 1

你正在寻找的是CSS粘滞页脚 。

 * { 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> 

Answer 2

你可以使用position:fixed; bottom 。

例如：

 #footer{ position:fixed; bottom:0; left:0; } 

Answer 3

HTML

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

CSS

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

Answer 4

也许最简单的是使用position: absolute来固定底部，然后使用合适的边距/填充以确保其他文本不会溢出顶部。

CSS：

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

这里是html的主要内容。

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

Answer 5

设置其位置：固定和底部：0，以便它将始终驻留在浏览器窗口的底部

Answer 6

使用这种风格

 min-height:250px; height:auto;