css 高度百分百失效 |css怎么用交集选择器

.container{
height: 100%;
}

然而，在实际操作中，大家会发现这行代码并不能达到大家期望的效果，容器元素的高度并没有铺满整个父元素。

造成这种情况的原因有很多，其中最主要的原因是大家没有设置父元素的高度，容器元素无法计算出自己的具体高度。

另外一个原因是盒模型的影响，如果大家设置了容器元素的padding或border，容器元素的实际高度会比设置的高度要大。

针对这些问题，大家可以采取一些解决方案：

1.设置html和body的高度为100%，以确保父元素有具体高度：

html, body{
height: 100%;
}
.container{
height: 100%;
}

2.使用绝对定位的方式，使容器元素铺满父元素：

.parent{
position: relative;
}
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

3.使用flex布局来实现铺满效果：

.parent{
display: flex;
}
.container{
flex: 1;
}

4.最简单的方式是设置容器元素的高度为vh，即视口高度的百分比，但这种方式无法兼容所有浏览器：

.container{
height: 100vh;
}

综上所述，要实现高度百分百的效果，大家需要注意父元素的高度以及盒模型的影响，同时选择合适的解决方案，在实际操作中也要考虑浏览器的兼容性。