【css】div盒子height:100%高度无效解决办法

div盒子设置height: 100%无效的原因通常是因为其父元素的高度没有被定义。在CSS中，百分比的高度是相对于父元素的高度的，如果父元素的高度未设置或者未能传递下来，子元素设置height: 100%将不会有效。

解决办法：

1. 确保父元素的高度被设置。可以给父元素设置固定的高度，或者使用%、vh、vw、auto等单位。
2. 使用flex布局：如果父元素使用display: flex;，子元素会自动占据剩余空间。
3. 使用absolute定位：如果父元素使用position: relative;，子元素可以使用position: absolute;和top: 0;、bottom: 0;来使高度为100%。
4. 使用min-height: 100vh;：当你想确保元素至少占据视口的100%高度时，可以使用min-height: 100vh;。
5. 使用JavaScript：如果父元素的高度是动态变化的，可以使用JavaScript动态计算并设置父元素的高度，然后子元素的height: 100%将生效。

示例代码：

/* 方法1：父元素设置高度 */
.parent {
  height: 500px; /* 或者其他单位 */
}
.child {
  height: 100%; /* 子元素继承父元素的高度 */
}
 
/* 方法2：使用Flex布局 */
.parent {
  display: flex;
}
.child {
  flex: 1; /* 子元素会自动占据剩余空间 */
}
 
/* 方法3：使用absolute定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
}
 
/* 方法4：设置最小高度 */
.parent {
  min-height: 100vh; /* 视口的100%高度 */
}
.child {
  height: 100%;
}
 
/* 方法5：使用JavaScript */
// JavaScript代码示例
const parent = document.querySelector('.parent');
parent.style.height = window.innerHeight + 'px'; // 设置父元素高度为视口高度

选择合适的方法应用于具体场景中。