Question

为什么calc函数不能在相对位置的高度上起作用，而在witdh中起作用？

有效：

#div1 {
    position: absolute;
    left: 50px;
    height: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

不是：

#div1 {
    position: relative;
    left: 50px;
    height: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

但是它也可以工作：

#div1 {
    position: relative;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

P.S .：在https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc上测试

Answer 1

绝对定位的元素相对于最近定位的祖先（如果没有祖先，则相对于文档本身）进行定位。该文档与视口一样高，因此height属性起作用。

相对定位的元素是文档流的一部分，并以其直接父元素（在这种情况下为正文）的高度为准。由于主体没有设置尺寸，因此元素不知道要选择哪个高度，因此它会忽略该属性。

对于width，没有这种区别，因为主体也是文档中视口的整个宽度。

解决方案（感谢@str）：使用100vh而不是100％进行高度计算。

为什么calc函数在相对位置的高度上不起作用？

1 个答案: