CSS中设置height:100%无效的原因分析和解决方法


分类:HTML,CSS 作者:myerob 标签:CSS 设置 height:100% 无效 原因分析 解决方法 阅读:1874 收藏
导读:
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:代码如下:<!-- 高度实际为字体大小 …

我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:

代码如下:

<!-- 高度实际为字体大小 -->
<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等可以通过开发者模式查看当前父元素是谁

解决方法二:不用设置父元素高度,通过设置定位(fixed或absolute)解决

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

在使用height: 100%;时需要注意的一些事项

margin 和 padding 会让你的页面出现滚动条,也许这是你不希望的。

如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。

 

 


相关推荐