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 相关文章推荐
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
CSS3 天气图标动画效果
Apr 06 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
php和html的区别点详细总结
2019/09/24 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python os模块介绍
2014/11/30 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Python如何使用循环结构和分支结构
2022/04/13 Python