Question

我有两个div在一个容器div中垂直堆叠。容器div有height: 100%，底部内部div有动态高度。我希望顶部div占用容器的剩余空间，以便底部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的解决方案，最好是没有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>

小提琴：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 2

你说最好不是基于flexbox的，但如果你解除这个限制，那就是这样：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

不确定这是否是你需要的。最高div最高为200px。

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

使内部div调整大小以适应其容器，并在其下方具有动态高度页脚

3 个答案: