怎样让页面的 footer 始终在最底部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样让页面的 footer 始终在最底部相关的知识，希望对你有一定的参考价值。
参考技术A 有时候我们的页面主体高度并不固定，而我们又不想让footer跟着主体高度变化而跑动，也许您会想到使用position:fixed;但是这并不能达到理想的要求，下面是我曾经在实际工作中用到的一种方法：html:
<div class="wrapper>
<div class="content">主体内容</div>
</div>123
css:
html,body
height:100%;
.wrapper
min-height:100%;//使内容高度和body高度一样
margin-bottom:-70px;向上缩减70px，使footer在可视范围
.content
margin-bottom:130px;//控制主体内容和底部高度之间距离
.footer本回答被提问者采纳
让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 始终在最底部的主要内容，如果未能解决你的问题，请参考以下文章