如何在原版中创建大小响应独立滚动部分 html
How to create a size responsive independantly scrolling section in vanilla html
我有一个可能很常见的滚动问题，但我似乎找不到它。本质上，我有一个网页的可滚动部分，从 header 正下方到屏幕底部。但是，为了使该部分可滚动，我必须设置一个高度，我将其设置为 70vh，而 header 是静态高度。当视口改变高度时，例如对于更大的屏幕，70vh 不足以到达屏幕底部，因为它现在应该按比例占据更多 space.
我的问题是，当视口改变大小时，如何使该部分始终保持正确的高度。我的一个想法是找到 header 占用的视口高度百分比，然后从 100 中减去它，但我不知道该怎么做。
I can't add images in my post yet but this is a link to what the section looks like
您可以使用calc()
.scrollable {
height: calc(100vh - 80px /* Height of your header */);
}
但是，您需要为网站上的每个断点执行此操作，这会改变页眉的高度，并且 100vh 有时会被浏览器的“元素”（例如 URL bar on手机等
我有一个可能很常见的滚动问题，但我似乎找不到它。本质上，我有一个网页的可滚动部分，从 header 正下方到屏幕底部。但是，为了使该部分可滚动，我必须设置一个高度，我将其设置为 70vh，而 header 是静态高度。当视口改变高度时，例如对于更大的屏幕，70vh 不足以到达屏幕底部，因为它现在应该按比例占据更多 space.
我的问题是，当视口改变大小时，如何使该部分始终保持正确的高度。我的一个想法是找到 header 占用的视口高度百分比，然后从 100 中减去它，但我不知道该怎么做。
I can't add images in my post yet but this is a link to what the section looks like
您可以使用calc()
.scrollable {
height: calc(100vh - 80px /* Height of your header */);
}
但是，您需要为网站上的每个断点执行此操作，这会改变页眉的高度，并且 100vh 有时会被浏览器的“元素”（例如 URL bar on手机等