CSS Calc：使用百分比时的值错误？答案

【问题标题】：CSS Calc: Wrong values when using percentage?CSS Calc：使用百分比时的值错误？
【发布时间】：2018-11-26 12:41:08
【问题描述】：

CSS calc 返回错误的 % 值时遇到问题。

我的想法是创建一个粘性侧边栏，您首先在其中滚动到末尾，然后它会一直停留在那里直到内容结束。它适用于 vh 单位，当我为 div 使用绝对高度时，但当我使用 % 时不适用。

.sidebar {
position: sticky;
top: calc(100vh - 100%); <-- does not work
top: calc(100vh - 1600px); <-- works as expected.
}

所以也许我误解了 % 在这种情况下的含义（我的理解：应用类 .sidebar 的对象的高度）还是 calc() 不好用？

编辑：这就是我的意图（黄色：视口；侧边栏：蓝色；红色：内容）。侧边栏滚动，直到它的底部边缘和视口处于相同的高度，然后只有内容在移动，之后侧边栏的底线和内容处于同一水平。它实际上适用于固定值。

似乎答案不是使用父母身高，因为这会导致更大的值，导致侧边栏底线高于视口底部，但实际上更低。

谢谢，祝你有美好的一天！

【问题讨论】：

标签： html css

【解决方案1】：

基于百分比的距离基于父母的大小 - 例如height: 100% 将使目标元素达到父元素高度的 100%（尽管高度并不总是很好，有百分比）； width: 70% 将使目标元素占父元素宽度的 70%。

【讨论】：

【解决方案2】：

% 是它所包含的元素大小的百分比。因此，如果您的页面很长，它可能会远远超过视口的大小，因此 100vh - 100% 将变为负数。这意味着侧边栏将延伸到视口的顶部。如果您打算将侧边栏固定在页面顶部，您不妨放

top: 0

【讨论】：