html里按钮始终在底部,详解footer始终位于网页底部的方法介绍

本文探讨了三种方法确保网页底部(footer)始终保持在浏览器视口底部,即使内容量变化。方法一使用`position:fixed`实现底部栏固定;方法二通过`position:absolute`和`padding-bottom`确保内容不被覆盖;方法三利用`margin负值`配合`min-height`确保footer在内容下方。这些技巧对于共用头部和尾部的网页设计非常实用。

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

上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面。。而且有的页面内容少的话不能把尾部挤到最下面,所以,这次来研究一下怎么能让尾部一直在下面。。

先把html代码放出来:

头部

内容

内容

内容

内容

同上,以下省略N行。。。

方法一:其实这个应该是始终位于浏览器窗口底部的方法,而不是位于网页底部的方法,就像是在浏览某些网页在未登录或者注册的时候下面始终有一行提示信息的样式,大概就和回到顶部按钮是一样的。。

上个图:大概就是这样的

2951d415ea3e7ced173e698f2c1c1511.png

CSS代码:body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

需要给footer设置固定高度

方法二:这个是让footer位于网页底部的方法 固定footer高度+绝对定位body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

在中间的内容部分加上padding-bottom是为了让内容能够完全显示不被footer覆盖,同时也要给footer设置固定高度

方法三:固定footer高度+margin负值

html代码有所不同:

头部

内容

内容

内容

内容

同上,以下省略N行。。。

CSS代码:body{height: 100%;}

.wrap{min-height: 100%;}

.header{height: 100px;background-color: greenyellow;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}

内容里加padding-bottom同上

附图:

内容较少的时候:

d76fc37bc816b5cae4608831db82c303.png

内容多的时候:

559b8ba2b7da1bcb5b25e72e713c40ff.png

1d315b21406f36cc45df337be0022798.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值