Html 如何通过CSS计算从容器顶部到窗口末端的距离？

我有一个带有几个元素的简单HTML布局，下面是一个可滚动的div容器

我不知道

unknown height

的大小，因为元素是动态生成的，有没有一种简单的方法可以使div容器可以滚动，但设置的高度不能超过窗口的底部

。滚动条{
溢出y：自动；
溢出x：隐藏；
背景色：#FF0000；
overscroll-behavior-y：包含；
高度：计算（100vh-100px）！重要；
}

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

给你：

父容器

• 在容器上使用flexbox
• 设定高度
• 调整方向以恢复垂直流。->这样，所有子元素都将填充容器的高度
• 添加溢出隐藏以隐藏通常需要更多空间的内容

滚动子对象

• 将溢出滚动设置为子元素

NB我添加了边框颜色，以便轻松检查最终结果

。您的容器{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
溢出：隐藏；
边框：1px纯蓝色；
}
.滚动条{
溢出y：滚动；
边框：1px纯红；
}

福

滚动条
福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

给你：

父容器

• 在容器上使用flexbox
• 设定高度
• 调整方向以恢复垂直流。->这样，所有子元素都将填充容器的高度
• 添加溢出隐藏以隐藏通常需要更多空间的内容

滚动子对象

• 将溢出滚动设置为子元素

NB我添加了边框颜色，以便轻松检查最终结果

。您的容器{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
溢出：隐藏；
边框：1px纯蓝色；
}
.滚动条{
溢出y：滚动；
边框：1px纯红；
}

福

滚动条
福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

福

简短回答：不。SASS是一个CSS预处理器，可以转换为CSS，所以实际上，你是在问CSS是否具有内容高度感知功能。如果您为布局添加HTML以及相关CSS来创建一个最小的示例，我们可能会提供其他解决方案。谢谢！我将我的问题更新为一个最小的可重复示例简短回答：不，SASS是一个CSS预处理器，可以转换为CSS，所以实际上，你在问CSS是否具有内容高度感知功能。如果您为布局添加HTML以及相关CSS来创建一个最小的示例，我们可能会提供其他解决方案。谢谢！我将我的问题更新为一个最小的可复制示例谢谢！这几乎就是我所需要的。不幸的是，我的例子有点复杂。在我的例子中，蓝色和红色边框是它们应该在的位置，但是div不再滚动，尽管计算出了溢出-y。你知道我可以寻找什么来阻止div滚动吗？首先，我将移除父对象的溢出以检查子对象内部发生了什么。然后可能会设置显示：块的孩子，它应该有“坚实”的滚动。谢谢！这几乎就是我所需要的。不幸的是，我的例子有点复杂。在我的例子中，蓝色和红色边框是它们应该在的位置，但是div不再滚动，尽管计算出了溢出-y。你知道我可以寻找什么来阻止div滚动吗？首先，我将移除父对象的溢出以检查子对象内部发生了什么。然后可能会将display:block设置为子对象，它应该有“solidity”来滚动。