在自己写demo的过程中,想使用display:flex实现垂直居中,代码如下:
<style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ width: 600px; height: 260px; border: 1px solid #000; } </style>
并不能实现我想要的效果,外层的父元素高度没有占满整个屏幕。。
解决:给#login一个min-height: 100vh,配合 display: flex; justify-content: center; align-items: center;实现垂直居中。
<style> #login{ width:100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .login-body{ width: 600px; height: 260px; border: 1px solid #000; } </style>
视口单位(Viewport units)
什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。
根据CSS3规范,视口单位主要包括以下4个:
1.vw:1vw等于视口宽度的1%,视框宽度是100Vw。
2.vh:1vh等于视口高度的1%,视框高度是100Vh。
3.vmin:选取vw和vh中最小的那个。
4.vmax:选取vw和vh中最大的那个。
到此这篇关于CSS 实现高度自适应铺满整屏的实现的文章就介绍到这了,更多相关CSS高度自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为...
1.我不会挽留任何一个企图离开我的人,你是例外。 2.有些记忆,注定无法抹去,...
一个 IM 服务端项目,采用 Spring Reactor 作为基础技术研发,全站响应式技术应...
前言 众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题,...
1.对你说晚安的人很多,可只有一个人说的晚安听起来最特别。 2.女人永远不会明...
Dreamweaver设计网页的时候,想要实现一个网页内含有两个或多个页面,该怎么实现...
1.我不想和别人拥抱,因为那里没有你的心跳。 2.爱一个人什么感觉,你吸过毒吗...
1.环境 VS 2019 16.9.0 Preview 1.0 .NET SDK 5.0.100 2.前言 CSS一旦生效,就会...
相对宽度和绝对宽度冲突时的div解决方法 摘要:一般我们在使用绝对宽度时会使用p...
设计网页的时候,想要添加导航按钮,该怎么制作导航按钮呢?下面我们就来看看使...