html怎么自动设为底部,让底部永远在页面最底部显示的css方法

让底部永远显示在页面最底部需要考虑两种情况：

一种是当页面内容高度大于浏览器窗口高度时，这时底部会正常的显示在页面最底部；

另一种是当页面内容高度小于浏览器窗口高度时，这时底部会漂到浏览器窗口中间位置，这通常不是我们想要的结果，这时我们希望底部内容显示在浏览器窗口的底部。

怎么实现这种效果呢？

我们需要用到css新增加的vh单位和box-sizing这个属性

具体的做法是：

用一个外包元素将页面内容包起来，像这样：

正文内容

底部内容

给他设置css样式如下：

.wrapper{

position:relative;

min-height:100vh;

padding-bottom:120px; //将padding-bottom大小设置为底部内容的高度

box-sizing:border-box;

}

最后将底部用绝对定位，定位在底部，底部css的示例：

.footer{

position:absolute;

left:0;

bottom:0;

width:100%;

height:120px;

}

需要注意的是，底部的高度height和外包元素的padding-bottom参数必须一致

html怎么自动设为底部,让底部永远在页面最底部显示的css方法相关推荐

li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...
我们在开发动态网站的时候,一般都会在后台让用户添加文章,在添加文章的过程中难免用户会添加一些大的图片,这样,在前台显示的时候图片就会把页面撑的很大,很难看,今天就教大家利用JavaScript函数来实 ...
vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验前期准备因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
seaborn将图例放置在图像外部并使用move_legend函数将图例（legend）放置在图像的底部（bottom）、且单行展开显示
seaborn将图例放置在图像外部并使用move_legend函数将图例(legend)放置在图像的底部(bottom).且单行展开显示目录 seaborn将图例放置在图像外部并使用move_leg ...
footer始终在页面最底部的方法（问题待检验）
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
将页脚保持在页面的底部——Javascript+Css实现
功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部 1.将Javascript代码和DIV/CSS代码写在同一个文件里: <!DOCTYPE html PUBLIC "-// ...

html怎么自动设为底部,让底部永远在页面最底部显示的css方法

html怎么自动设为底部,让底部永远在页面最底部显示的css方法相关推荐

最新文章

热门文章