设置height:100%无效的原因以及两种解决方法

原创于 2022-01-04 17:57:11 发布 · 2.2w 阅读

CC 4.0 BY-SA版权

文章标签：

53 篇文章

订阅专栏

本文探讨了如何让HTML元素的宽度自适应浏览器，同时解决高度自适应难题，涉及设置父元素高度、定位策略，并提醒读者注意margin/padding对滚动条的影响及百分比高度可能带来的元素扩展。

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

原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因

<!-- 高度实际为字体大小 -->
<div class="box" style="width:100%;height:100%;background-color:red;">
    width:100%;height:100%;
</div>

在这里插入图片描述

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

备注：vue或者react等可以通过开发者模式查看当前父元素是谁

.box {
	/* position: fixed; */
	position: absolute;
	top: 0;
	left: 0;
}