填充浏览器高度为 height: 100%

最新推荐文章于 2023-04-23 12:42:26 发布

dongceha

最新推荐文章于 2023-04-23 12:42:26 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/dongcehao/article/details/79700437

前端专栏收录该内容

77 篇文章

订阅专栏

本文介绍了一种使用CSS实现网页全屏布局的方法，并介绍了vh单位的应用，这种方法能够使页面元素高度随浏览器窗口变化而变化，实现了良好的跨设备兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一个需求，就是显示的内容就是屏幕的高度。

我首先使用 body和 body 的子标签 height: 100%，然而并没有什么软用

他该是多少还是多少，

但是，我查了很多资料，发现一堆原生的函数

console.log('window.innerHeight')

console.log(window.innerHeight)

console.log('body.clientHeight')

console.log(document.body.clientHeight)

console.log('documentElement.clientHeight')

console.log(document.documentElement.clientHeight)

console.log('screen.height')

console.log(screen.height)

等等，都不能很好地兼容所有的移动端浏览器。要么是多了，要么就是少了，只能兼容很少数的浏览器

。。。

没办法，只好自己想办法，差点就动了

navigator 的主意

罪过，罪过

既然js 的知识量不够，那就只能动一动 css 的土了。

高度 100% 没有用，度娘的结果是，浏览器不会自动计算显示的高度，对于内容，他只需要简单的堆砌即可。

所以，高度 height:100% 设置在根节点上的结果就是没有设置

除非一层一层的去设置 height: 100%，一直到 html 标签，这个最根的节点

没错，就是那个 <html></html>标签。

那还有什么办法吗？当然是有的。

position: absolute/fixed

他的定义是：最近的设置了 position 的标签，或者根据窗口定位。嗯，窗口拿到了

.login // 这个 class 名称不要介意，直接从自己的 demo copy 下来的

position absolute

min-height:100%;

只要最外面的节点这样设置，就能根据定位的节点即窗口来设置高度。

来达到设置整个窗口高度的目的

2018.4.20

然后，高潮来了

发现了一个新的 css 单位，叫 vw, vh, vmin, vmax

这个单位是什么意思呢，就是说

v: view 视窗，可看见的

h: height 高度

他默认将视窗分成了 100，然后通过 1vh 就是 1% 的视窗高度，so

想要拿到 100% 高度的话，只需要 100vh 就能实现，

这样就能真正意义上的实现兼容多端，而且简单的就能实现高度居中，宽度居中

上代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 	<title>vw&vh</title>
 5 	<style type="text/css">
 6 	    *{
 7 	    	margin: 0;
 8 	    	padding: 0;
 9 	    }
10 		.div1{
11 			background-color: pink;
12 			width: 50vw;
13 			height: 50vh;
14 			margin-top: 25vh;
15 			margin-left: 25vw;
16 			overflow: hidden;
17 		}
18 		.div2{
19 			background-color: red;
20 			width: 20vw;
21 			height: 20vh;
22 			margin-top: 15vh;
23 			margin-left: 15vw;
24 		}
25 	</style>
26 </head>
27 <body>
28 <div class="div1">
29 	<div class="div2"></div>
30 </div>
31 </body>
32 </html>

至于兼容性，

OK ，打完收工