请看看这支笔:
https://codepen.io/linck5/pen/gRKJbY?editors=1100
body{ margin: 0;}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
background-color: darksalmon;
height: 50px;
}
.inner-container {
flex: 1;
background-color: chocolate;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
background-color: blueviolet;
flex: 1;
overflow: auto;
font-size: 40px;
line-height: 5rem;
}
.bottom {
background-color: darkkhaki;
height: 200px;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="top-bar">Top bar</div>
<div class="inner-container">
<div class="top">
O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
</div>
<div class="bottom">Bottom part</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
我想只有.topdiv可滚动,而不是整个页面.我不希望.topdiv推下.bottom …