防止中间容器沉入底部容器中

Question

我想我找到了一种方法，当您调整窗口大小时，防止中间容器沉入顶部容器和底部容器中

但我意识到我弄乱边距的方式和我拥有 CSS 的方式它仅适用于顶部容器，所以我如何让它适用于底部容器的意义

为了防止中间容器沉入底部容器，这就是我的滚动条被切断的原因。我做了

底部容器透明，这样你们就可以明白我的意思，是的，我知道如果我继续缩小

窗口大小顶部容器和底部容器最终会相互碰撞。我不介意，特别是因为

当您将窗口缩小到我也不在乎的很多时，中间容器看起来就像它消失

了我只是关注你是否还能看到中间的容器。

这是我的代码

#container{
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: red;
height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top-container{
background-color: gold;
position: absolute;
top: 0;
height: 50px;
width: 100%;
}
#middle-container{
background-color: pink;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 50px;
margin-bottom: 50px;

height: 87%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;

}
#bottom-container{
background-color: rgba(0, 255, 0, 0.5);
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}

<div id='container'>

<div id='top-container'></div><!--</top-container>-->

<div id='middle-container'>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
</div><!--</middel-container>-->

<div id='bottom-container'></div><!--</bottom-container>-->

</div><!--</container>-->

Answer 1

您无需设置 #middle 容器的高度或边距。它的位置是绝对的top: 50px因此它 #top 容器之后开始(高度为 50px(，bottom: 50px使其在容器 #bottom 之前结束。

#container{
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: red;
height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top-container{
background-color: gold;
position: absolute;
top: 0;
height: 50px;
width: 100%;
}
#middle-container{
background-color: pink;
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 50px;

width: 100%;
overflow-y: auto;
overflow-x: hidden;

}
#bottom-container{
background-color: rgba(0, 255, 0, 0.5);
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}

<div id='container'>

<div id='top-container'></div><!--</top-container>-->

<div id='middle-container'>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
<h1>x</h1>
</div><!--</middel-container>-->

<div id='bottom-container'></div><!--</bottom-container>-->

</div><!--</container>-->