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

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

标签： htmlcss

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