提问人：Cuberino 提问时间：11/7/2023 更新时间：11/7/2023 访问量：26
将滚动条添加到包含标题和内容的页面
Add Scrollbar to page with header and content
问：
想象一下，我有以下页面：
我遇到的问题是滚动条在我的视点之外结束。我该如何存档，滚动条正好和我的视口一样长。这也意味着如果我调整浏览器窗口的大小，滚动条的高度应该更改为它。 我尝试使用视口高度 （vh），但我无法将其存档，因为我使用的是具有固定位置的标题。
顺便说一句，我使用 Vue，如果有任何特定于 vue 的解决方案，请随意。
下面是一个示例
<Header></Header> // header with fixed position and height of 8rem
<div class="wrapper">
<div class="content">
</div
</div>
.wrapper
max-height: 100vh
.content
margin-top: 8rem
height: 100vh // I was hoping this would take 100% of my wrapper since the wrapper can only contain the max height of my current screen
overflow-y: auto
答：
1赞
homie_v
11/7/2023
#1
header {
height:8rem;
background-color: gray;
}
.wrapper {
max-height: calc(100vh - 8rem);
}
.content {
overflow-y: scroll;
}
https://codepen.io/homie_veroni/pen/VwgPEdd
评论
0赞
Cuberino
11/7/2023
计算是一种非常有用的方法。谢谢你的!!
评论