Html5让容器充满屏幕高度或自适应剩余高度的布局实现


Posted in HTML / CSS onMay 14, 2020

在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 height:100% 这样的 CSS 来写。这样写的话,当容器内内容很多的时候是没有问题的,可以达到预期的效果,但是如果容器内内容比较少,不足以撑起足够的高度的话,这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢?

让容器高度充满这个屏幕

在容器内容很少的情况下,要想让这个容器充满整个屏幕可以这样:

.container{
    min-height:100vh
}

你没看错,只需要这一个属性就可以办到,vh 是一个新的单位,表示的是屏幕的高度,还有一个对应的宽度属性 vw,如果还不知道的可以去查下资料。这个新的单位可能有的老浏览器不支持(说的是谁你们都知道的)。

让容器高度充满剩余屏幕高度

上面说的让容器充满整个屏幕是一个比较简单的情况,实际项目中这种简单情况是非常少的,一般碰到比较多的可能是要让容器充满屏幕的剩余高度,有了上面的那个做基础,这个需求也就简单了,用 vh 结合 flex 布局就可以很容器的实现。直接看代码:

.container{
    min-height:100vh;
    display:flex
}
.header{
    height:100px
}
.content{
    flex:1
}
.footer{
    height:100px
}

使用上面的样式就可以让 content 的高度自适应屏幕的剩余高度,简单方便。同样可能会面临老浏览器适配的问题。因为我做的项目主要是在移动端使用,所以就不管那老掉牙的家伙了。

到此这篇关于Html5让容器充满屏幕高度或自适应剩余高度的布局实现的文章就介绍到这了,更多相关Html5容器充满屏幕高度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 #HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 #HTML / CSS
HTML5 body设置自适应全屏
May 07 #HTML / CSS
iframe与window.onload如何使用详解
May 07 #HTML / CSS
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
php一个找二层目录的小东东
2012/08/02 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python字符串切片操作知识详解
2016/03/28 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
人资专员岗位职责
2014/04/04 职场文书
施工协议书范本
2014/04/22 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
毕业生个人自荐书
2015/03/05 职场文书
教学质量月活动总结
2015/05/11 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书