当前位置:「千越SEO」 / 网站维护 / 让footer保持在页面底部

让footer保持在页面底部

来源:千越SEO
浏览:187

在网站建设过程中需要考虑一个问题,当网页内容显示不满整屏是,网页底端(footer)是随着内容上移,还是始终固定在底部。如图

footer随页面内容上移

(footer随页面内容上移)

footer固定在底部的效果

(footer固定在底部的效果)

附上HTML代码

<div id="main">
<section class="content">
<header>页面头部</header>
<p>页面内容</p>
</section>
<footer id="footer">
<p>页脚</p>
</footer>
</div>

CSS代码

html,body { height: 100%; }
#main { min-height: 100%; }
.content { padding-bottom: 100px; } /* padding-bottom 等于 footer 的高度 */
#footer { width: 100%; height: 100px; margin-top: -100px; } /* margin-top 为 footer 高度的负值 */
本文地址:https://www.seoo.net/maint/494.html
  • qq
  • 发稿微信咨询
  • 扫一扫,微信咨询