css height:100% 为什么不起作用

height: 100% 的确可以设置元素的高度为其父元素的百分比高度。但要注意的是，为了实现这个效果，父元素的高度必须已经通过某种方式设置为一个确定的值，而不是默认的auto。

以下是一些可能导致 height: 100% 不起作用的常见情况：

1. 没有设置父元素的高度：如果父元素的高度未设置或设置为auto，那么子元素的 height: 100% 将不会起作用，因为它无法确定父元素的实际高度。

2. 父元素的高度为百分比值：如果父元素的高度也是以百分比值来设置的，那么它的实际高度将取决于其祖先元素的高度。如果没有任何祖先元素设置高度或设置的高度为auto，那么 height: 100% 仍然无法确定正确的高度。

3. 父元素的高度为可视窗口高度：如果父元素的高度是 100vh（表示可视窗口的高度），那么子元素的 height: 100% 将会生效，因为此时元素的高度已经固定为一个确定的值。

4. 父元素使用了浮动或绝对定位：如果父元素使用了浮动或绝对定位等布局属性，那么它的高度将会塌缩为0，此时子元素的 height: 100% 也无法确定正确的高度。

为了解决这些问题，您可以尝试以下解决方案：

• 确保父元素有一个确定的高度值。
• 使用 height: 100vh 设置父元素的高度，以确保其占满整个可视窗口。
• 避免在父元素使用浮动或绝对定位等属性，或者使用额外的 CSS 技巧来解决这些问题，例如使用clearfix或设置 overflow: hidden 等方法。

还要注意的是，如果父元素的高度值为 0 或被设置为不可见（例如 display:none），那么也会导致子元素的 height: 100% 失效。