让footer始终待在页面底部

最新推荐文章于 2025-05-08 19:12:41 发布

weixin_34248023

最新推荐文章于 2025-05-08 19:12:41 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/candy-Yao/p/7400304.html

本文介绍了一种确保网页内容和页脚始终正确对齐的布局方法。通过设置html和body的高度为100%，并使用min-height属性，即使内容高度变化也能保持页脚位置不变。此外，还介绍了如何通过定位属性避免页脚覆盖主要内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　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>

转载于:https://www.cnblogs.com/candy-Yao/p/7400304.html