网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)

有时候我们的需求是，当页面内容高于可视高度时，footer跟在内容最后，下拉滚动条才会显示。

当页面内容少于一页，footer显示在最底部，而不是跟着内容显示到页面中间或其他位置。

先写好html内容

<body><div class="content"><div class="main">main</div></div><div class="footer">footer</div>
</body>

然后实现几个步骤即可：

将html，body，content的高度设置为100%。
给footer设置一个确定的高度，比如50px。
给main设置一个padding-bottom，高度大于等于50px，防止main内容被footer覆盖。
将footer的margin-top设为-50px，移动到可视区域内。
根据需求做简单的调整即可。

css代码如下

html,
body {height: 100%;margin: 0;padding: 0;
}
.content {min-height: 100%;background: rgb(107, 238, 255);overflow: hidden;
}
.main {padding-bottom: 50px;
}
.footer {height: 50px;line-height: 50px;background: rgb(15, 112, 202);margin-top: -50px;
}

网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)相关推荐

微信小程序 - 返回前一个页面时，执行前一个页面的函数方（wx.navigateBack 返回后，执行上一页的某个函数方法刷新数据）回前一个页面时，执行前一个页面的函数方法。支持改变 data 数据。
前言例如,您使用 wx.navigateTo 跳转到页面后,当用户点击左上角返回时,您需要执行上一页的函数来达到更新数据或改变数据. 比如当付款完成后,从页面返回查看订单时,订单列表此时数据必须是 ...
html 停留页面底部,HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位旋转 ...
如何设置页脚跟随页面滚动高度不够时固定在底部
在开发PC页面的时候我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...
CSS查漏补缺（一）—页面内容不足铺满屏幕高度和有滚动条时，footer始终保持底部显示
记录一个项目中经常会用到的技巧,footer区(比如版权信息)要始终居于页面底部.如果用fixed定位显然不可取,因为要保证页面高度大于屏幕高度时,footer区要跟随着页面滚动保持在底部,如下图: ...
[html] 写个布局，当页面高度不够时，底部固定在下面，反之不固定
[html] 写个布局,当页面高度不够时,底部固定在下面,反之不固定 <div class="layout"> <header class="heade ...
移动设备页面高度不足时min-height 的尴尬处理
移动设备页面高度不足时min-height 的尴尬处理在做html5的页面时,经常遇到页面内容太少撑不起来整个手机屏幕的高度. 我们经常使用min-height来处理,比如min-height:56 ...
如何将footer标签固定在底部_如何让footer标签置于页面最底部
这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...
uniapp 实现聊天页面 textarea固定在底部且高度自增
在使用uniapp实现一个IM即时通讯系统的时候聊天界面是十分重要的,参考微信QQ的界面,决定模仿一个差不多的出来. 对于消息内容,肯定就是使用scroll-view组件了,发送消息的输入框则固定在底 ...
如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...

网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)

网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)相关推荐

最新文章

热门文章