让footer始终待在页面底部
Posted Candy-Yao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让footer始终待在页面底部相关的知识，希望对你有一定的参考价值。
1、把html和body的height属性设为100%;保证content的高度能撑满浏览器;
2、把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
3、将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。
<style>
body,html { margin: 0; padding: 0; height:100%; } #content { min-height:100%; position: relative; } #main { padding: 10px; padding-bottom: 60px; } #footer { position: absolute; bottom: 0; padding: 10px 0; width: 100%; } #footer h1 { font: 20px/2 Arial; margin:0; padding:0 10px; } </style> <body> <div id="content">
<div id="main"> <h1>main</h1> <p>你可以改变浏览器窗口的高度，来观察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> </div> <div id="footer"> <h1>Footer</h1> <div> </div> </body>
以上是关于让footer始终待在页面底部的主要内容，如果未能解决你的问题，请参考以下文章