CSS中父级容器配置了position: relative;min-height: 300px;max-height: 70vh子元素给height百分比不起作用

当一个父容器设置了 position: relative; 属性时，子元素的高度百分比是相对于父容器的高度计算的。而当父容器同时设置了 min-height 或 max-height 属性时，父容器的高度会根据这些属性进行限制，导致子元素的高度也受到限制。因此，可以尝试将父容器的高度属性改为 height: 300px; 或 height: 70vh;，这样子元素的高度百分比就可以按照预期进行计算了。如果需要保留原有的 min-height 或 max-height 属性，可以考虑使用 calc() 函数来计算子元素的高度，例如：height: calc(50% - 20px); 表示子元素高度为父容器高度的一半减去 20 像素。

相关问题

position: relative; width: 255px; height: 40px; margin-top: 40px;

这是一个CSS代码块，表示给某个元素设置一些样式属性：

- `position: relative;` 表示将该元素相对于其父元素进行定位，可以通过 `top`, `bottom`, `left`, `right` 属性进行微调位置。
- `width: 255px;` 表示该元素的宽度为255像素。
- `height: 40px;` 表示该元素的高度为40像素。
- `margin-top: 40px;` 表示该元素与其上方的元素之间留有40像素的外边距。

这些属性可以根据具体需求进行调整。

section { display: flex; justify-content: center; align-items: center; min-height: 100vh; position: relative; overflow: hidden; }

这是一段CSS代码，定义了一个拥有以下属性的section元素：

- display: flex; 使该元素变为弹性盒子容器。
- justify-content: center; 将容器内的弹性盒子元素在主轴方向上居中对齐。
- align-items: center; 将容器内的弹性盒子元素在交叉轴方向上居中对齐。
- min-height: 100vh; 设置元素的最小高度为视窗高度的100%。
- position: relative; 将元素设置为相对定位。
- overflow: hidden; 隐藏元素中溢出的内容。