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

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-container的高度或边距。它的位置是绝对的，因此top: 50px使其开始于＃top-container（高度为50px）之后，bottom: 50px使其结束于＃bottom-container之前。

#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>-->