Html 固定div上的滚动条在底部被切断。有小提琴给你看吗

我有一个固定的左侧div。里面我有另一个div，它有overflow-y:auto。当这个div有一个滚动条时，它在底部被切断。我不知道如何解决这个问题。请帮忙。这是小提琴：

一些代码：

<div class="left-panel">
<div class="logo-box">Logo</div>
<div class="orange-button">Main Menu</div>
<div class="left-control-box">
<div class="left-control-scroll">
abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg<br />abcdefg
<br /></div>
</div>
</div>
<div class="top-panel">

---

vh

单位等于1/100视口高度<代码>100vh等于整个视口高度。由于div从视口顶部下方开始，因此无法看到其底部。您可以使用css3

calc（）

解决此问题

高度：计算（100vh-75px-50px）

vh

单位等于1/100视口高度<代码>100vh等于整个视口高度。由于div从视口顶部下方开始，因此无法看到其底部。您可以使用css3

calc（）

解决此问题

高度：计算（100vh-75px-50px）


.left-panel {
width: 240px;
position: fixed;
left: 0px;
top: 0px;
border-right: 1px solid #000000;
}
.logo-box {
width: 239px;
height: 50px;
background-color: #286ab4;
}
.orange-button {
height: 75px;
width: 239px;
background-color: #ff7a18;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
.left-control-box {
width:239px;
background-color: #cfcfcf;
height: 100vh;
overflow: auto;
}
.top-panel {
min-height: 50px;
position: fixed;
top: 0px;
left: 240px;
width: 100%;
background-color: #286ab4;
color: #ffffff;
border-bottom: 1px solid black;
}