介绍 & lt; style>
,,,#{登录
,,,,,,,宽度:100%;
,,,,,,,身高:,100%;
,,,,,,,显示:,flex,,
,,,,,,,justify-content:,中心;
,,,,,,,对齐项目:,中心;
,,,}
,,,.login-body {
,,,,,,,宽度:,600 px;
,,,,,,,身高:,260 px;
,,,,,,,边界:,1 px solid # 000;
,,,}
& lt;/style> & lt; style>
,,,#{登录
,,,,,,,宽度:100%;
,,,,,,,最低高度:,100 vh;
,,,,,,,显示:,flex,,
,,,,,,,justify-content:,中心;
,,,,,,,对齐项目:,中心;
,,,}
,,,.login-body {
,,,,,,,宽度:,600 px;
,,,,,,,身高:,260 px;
,,,,,,,边界:,1 px solid # 000;
,,,}
& lt;/style>
这篇文章主要介绍CSS实现高度自适应铺满整屏的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在自己写演示的过程中,想使用显示:flex实现垂直居中,代码如下:
并不能实现我想要的效果,外层的父元素高度没有占满整个屏幕. .
解决:给#登录一个最小高度:100 vh,配合显示:flex;justify-content:中心;对齐项目:中心;实现垂直居中。
<强>视口单位(窗口单位)
<强>什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:布局视口(布局视口),视觉视窗(视觉视口),理想的视窗(理想视口)。
<强>视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是视窗中的布局视口,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小…
根据CSS3规范,视口单位主要包括以下4个:
1.大众:1大众等于视口宽度的1%,视框宽度是100大众。
2. vh: 1 vh等于视口高度的1%,视框高度是100 vh。
3. vmin:选取大众和vh中最小的那个。
4。vmax:选取大众和vh中最大的那个。
以上是“CSS实现高度自适应铺满整屏的案例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
