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

Question

我有两个 div 垂直堆叠在一个容器 div 中。容器 div 有 height: 100%，底部 inner-div 有动态高度。我希望顶部 div 占据容器剩余的 space，这样底部 div 就可以有效地固定到视口底部。

<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 尊重 overflow: scroll;它只是将底部 div 推到视口之外。

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

谢谢！

Answer 1

不确定这是否是您需要的。顶部 div 最高为 200 像素。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.top {
    height: 20%;
    background-color: red;
    max-height: 200px;
}

.bottom {
    background-color: green;
    height: 80%;
}
</style>
</head>
<body>
<div class="container" style="height: 100%;background-color: yellow;">
  <div class="top" style="overflow: scroll;">
    <p>My content should scroll if I become too small to show all of it</p>
  </div>

  <div class="bottom">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

</body>
</html>

Answer 2

如果您在要滚动的内容周围使用绝对定位的 div，布局似乎不会占用 space，因此其他内容将在 table 基础布局。如果需要，您可以在绝对定位的 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/

Answer 3

你说最好不要基于 flexbox，但如果你取消该限制，情况会是这样：

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}
#container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
#top {
  background: lightblue;
  flex: 1;
  overflow: auto;
}
#bottom {
  background: lightgreen;
}

<div id="container">
  <div id="top">
    This is the top.
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div id="bottom">
    This is the bottom
  </div>
</div>

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

Make inner div resize to fit its container given dynamic height footer below it

html

css