怎样让页面的 footer 始终在最底部

怎样让页面的 footer 始终在最底部,第1张

有时候我们的页面主体高度并不固定,而我们又不想让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{

这种应该是fixed效果(设置某一模块固定在浏览器底部,页面滚动的时候也是),如果是我说的效果可以通过css设置:

position: fixed

bottom:0

left:0

width:100%

这里要注意,设置fixed的元素要记得设置宽度。如果要考虑低级的ie浏览器,就要加上css表达式实现,因为ie6不支持fixed属性。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11741944.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存