html - 使内部 div 调整大小以适应其下方给定动态高度页脚的容器

Question

我有两个 div 垂直堆叠在一个容器 div 中。容器 div 具有 height: 100%，底部 inner-div 具有动态高度。我想让顶部的 div 占据容器的剩余空间，这样底部的 div 就有效地固定在视口(viewport)的底部。

<div class="container" style="height: 100%">
  <div class="my-height-should-be-the-remainder-of-the-container" style="overflow: scroll">
    <p>My content should scroll if I become too small to show all of it</p>
  </div>

  <div class="my-height-should-take-priority-over-the-top-div">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

我试过使用 display: table 和内部 div 作为 display: table-row，但无法让顶部的 div 尊重 溢出:滚动；它只是将底部的 div 推到视口(viewport)之外。

我知道我可以在底部 div 上使用 position: fixed，然后使用 javascript 动态改变顶部 div 的 padding-bottom，但很想找到纯 CSS 解决方案，最好是没有 flexbox 的解决方案。

谢谢!

Answer 1

如果您在要滚动的内容周围使用绝对定位的 div，布局看起来不会占用空间，因此其他内容将在基于表格的布局中胜出。然后，如果需要，您可以在绝对定位的 div 的包装器上使用 overflow:auto。

示例:

body, html{
  margin:0;
  padding:0;
}
div{
  box-sizing:border-box;
}
.container{
  height:100vh;
  width:100vw;
  display:table;
  border-collapse:collapse;
}
.tr{
  display:table-row;
}
.td{
  display:table-cell;
  height:100%;
}
.header{
  height:100%;
  border:1px solid green;

}
.wrapper{
  height:100%;
  position:relative;
  overflow:auto;
  min-height:45px;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.footer{
  border:1px solid blue;
}

<div class="container">
  <div class="tr header">
    <div class='td'>
      <div class="wrapper">
        <div class="content">
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tr footer">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

fiddle :https://jsfiddle.net/trex005/j7m3yLp7/1/

更多详情:https://blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css-ie8-firefox-chrome-safari/