我对CSS calc返回％的错误值有疑问。
我的想法是创建一个粘性侧边栏，您首先在其中滚动到结尾，然后一直停留到内容结尾。它适用于vh单位，当我将绝对高度用于div时，但不适用于我使用％的情况。
.sidebar {
position: sticky;
top: calc(100vh - 100%); <-- does not work
top: calc(100vh - 1600px); <-- works as expected.
}
因此，也许我误解了％在这种情况下的含义(我的理解:类.sidebar应用于该对象的高度)还是calc()不好用？
编辑:
这就是我想要的(黄色:视口(viewport)；侧边栏:蓝色；红色:内容)。滚动边栏，直到它和视口(viewport)的底部边缘在同一高度，然后才移动内容，然后边栏和内容的底线在同一水平上。
它实际上适用于固定值。
似乎答案不是使用 parent 高度，因为这会导致更大的值，导致侧边栏底线比视口(viewport)底线高，但实际上更低。
感谢，并有一个愉快的一天!
最佳答案
％是所包含元素的大小的百分比。因此，如果您的页面很长，则可能超出视口(viewport)的大小，因此100vh-100％将变为负数。这意味着侧边栏将在视口(viewport)上方延伸。如果您打算将侧边栏固定在页面顶部，则最好将
top: 0
关于html - CSS Calc : Wrong values when using percentage?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50896404/