H5 布局 -- 让容器充满屏幕高度或自适应剩余高度
在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 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 的高度自适应屏幕的剩余高度,简单方便。同样可能会面临老浏览器适配的问题。因为我做的项目主要是在移动端使用,所以就不管那老掉牙的家伙了。
原文链接:https://blog.csdn.net/zgh0711/article/details/80319738
H5 布局 -- 让容器充满屏幕高度或自适应剩余高度的更多相关文章
- 如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar ...
- div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...
- div height 自适应高度 占满剩余高度的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 Flex布局(容器)
一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...
- DatagridView自动充满屏幕,并能指定某列宽度
1.要使datagridview正好充满屏幕,设置其AutoSizeColumnsMode属性为fill 2. 同时,我们想要某列宽点,某列窄点,在AutoSizeColumnsMode属性为fill ...
- 使用float属性布局时父元素高度不能自适应的解决方法
在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...
- 单个div充满屏幕的CSS方法
1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...
- CSS布局-body高度不等于页面高度
记录采坑: 博客记录问题,用作回忆用,不喜勿喷! html,body{width: 100%; height: 100%}这是初始定义的宽高.在布局越写越复杂的时候,布局很容易出现问题,例如一个页面中 ...
- css背景图充满屏幕
代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...
随机推荐
- spring多数据源分布式事务的分析与解决方案
一.概述 1.业务背景 对老系统进行重构合并,导致新系统需要同时对3个数据库进行管理.由于出现跨库业务,需要实现分布式事务. 2.开发环境 spring框架版本 4.3.10.RELEASE 持久层 ...
- juery 弹出框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python基础学习day6
代码块.缓存机制.深浅拷贝.集合 id.is.== id: 可类比为身份号,具有唯一性,若id 相同则为同一个数据. #获取数据的内存地址(随机的地址:内存临时加载,存储数据,当程序运行结束后,内存地 ...
- AspNetCore3.1_Secutiry源码解析_2_Authentication_核心对象
系列文章目录 AspNetCore3.1_Secutiry源码解析_1_目录 AspNetCore3.1_Secutiry源码解析_2_Authentication_核心项目 AspNetCore3. ...
- Docker Compose 文件讲解
Docker Compose 是什么 官方文档: Docker Compose是定义和运行多容器 Docker 应用程序的工具.使用"Compose",您可以使用 YAML 文件来 ...
- Angular入门之环境搭建(VS code)(转载)
安装Visual Studio Code VS code和我们常用的VS压根不是一回事,它只是一个开源的轻量级编辑器,而不是IDE,因为支持typescript语法,且插件功能丰富,所以选择 官网下载 ...
- Dubbo之服务消费原理
前言 上篇文章<Dubbo之服务暴露>分析 Dubbo 服务是如何暴露的,本文接着分析 Dubbo 服务的消费流程.主要从以下几个方面进行分析:注册中心的暴露:通过注册中心进行服务消费通知 ...
- 如何区分前端BUG和后台BUG?
测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...
- ArchLinux - 脚本安装使用指南
前面不想废话,讲什么脚本说明,功能什么的!只讲使用方法,其他的可以去Gitee看,去Github看. 脚本虽然支持Boot和UEFI,但是我打算一起讲,因为它们安装时的区别,只有3处不同. 第一步 先 ...
- python爬虫之beautifulsoup的使用
一.Beautiful Soup的简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释:Beautiful Soup提供一些简单的.python式 ...