如何使容器占据固定父元素内剩余的垂直空间？

Question

我在 固定 顶部有一些内容（它必须相对于视口定位）div 和下面的（可滚动）列表。

我希望列表从兄弟元素的底部开始，并在固定父元素的底部结束。我可以使用top: 123px;，但顶部内容的高度可变（height:calc(100%-123px); 和margin 相同）。 每个职位都有一些东西使他们不适合这份工作（例如：absolute 元素不考虑兄弟姐妹）。

Fiddle（不需要边框和边距）

#fixed-wrapper {
  border: 1px solid blue;
  position: fixed;
  top: 32px;
  bottom: 30px;
  left: 5px;
  right: calc(30%-5px);
}
#fixed-wrapper .scrollable-list {
  position: absolute;
  overflow-y: scroll;
  top: 50px;
  bottom: 0px;
  color: red;
  border: 1px solid red;
}
.some-bar, .some-other-bar {
  border: 1px solid green;
  margin: 2px;
  padding 2px;
}

<div id="fixed-wrapper">
  <div class="some-bar">some variable length text</div>
  <div class="some-other-bar">some image or text</div>
  <div class="scrollable-list">
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
  </div>
</div>

我怎样才能使这个设计工作？或者，或者，我怎么可能重新组织 DOM（或使用其他标签，可能是丑陋的表格）来拥有这些属性？

编辑：该解决方案只需要在 Chrome 下工作。

Answer 1

你可以像这样使用 javascript：https://jsfiddle.net/DIRTY_SMITH/komfhjdj/3/

<div id="fixed-wrapper">
  <div id="varHeight" class="some-bar">some variable length text</div>
  <div id="staticHeight" class="some-other-bar">some image or text</div>
  <div class="scrollable-list" id="list">
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
    <div class="list-item">item2</div>
    <div class="list-item">item1</div>
  </div>
</div>
<script>
var sHeight = document.getElementById('staticHeight').offsetHeight;
var vHeight = document.getElementById('varHeight').offsetHeight;
var totalHeight = sHeight + vHeight;

totalHeight = totalHeight + 6;

document.getElementById("list").style.top = totalHeight + "px";

</script>

Answer 2

您可以使用 CSS3 弹性框。我添加了<div class="scrollable-wrapper"> 以使您尝试实现的布局成为可能。

看代码sn-p里面的cmets，很容易理解。所以flex: 1; 表示flex-grow: 1; 占用所有可用空间。

https://jsfiddle.net/komfhjdj/1/

#fixed-wrapper {
  border: 1px solid blue;
  position: fixed;
  top: 32px;
  bottom: 30px;
  left: 5px;
  right: calc(30%-5px);
  display: flex; /*added*/
  flex-direction: column; /*added*/
}
.scrollable-wrapper {
  position: relative; /*added*/
  flex: 1; /*added*/
}
.scrollable-list {
  position: absolute;
  overflow-y: scroll;
  top: 0; /*updated*/
  bottom: 0;
  color: red;
  border: 1px solid red;
}
.some-bar, .some-other-bar {
  border: 1px solid green;
  margin: 2px;
  padding 2px;
}

<div id="fixed-wrapper">
  <div class="some-bar">some variable length text</div>
  <div class="some-other-bar">some image or text</div>
  <div class="scrollable-wrapper"> <!-- added this div -->
    <div class="scrollable-list">
      <div class="list-item">item1</div>
      <div class="list-item">item2</div>
      <div class="list-item">item1</div>
      <div class="list-item">item2</div>
      <div class="list-item">item1</div>
      <div class="list-item">item2</div>
      <div class="list-item">item1</div>
    </div>
  </div>
</div>