CSS实现高度自适应铺满整屏的案例-创新互联

这篇文章主要介绍CSS实现高度自适应铺满整屏的案例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

站在用户的角度思考问题，与客户深入沟通，找到海林网站设计与海林网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖海林地区。

在自己写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实现高度自适应铺满整屏的案例-创新互联
文章出自：https://www.cdcxhl.com/article10/gpjdo.html

成都网站建设公司_创新互联，为您提供响应式网站、网站排名、静态网站、网站导航、企业网站制作、App开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联