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

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

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

看代码段里面的注释，还是比较容易理解的。所以 flex: 1; 意味着 flex-grow: 1; 获取所有可用的 space。

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>

Answer 2

您可以像这样使用 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>

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

How to make a container occupy remaining vertical space inside fixed parent element?

html

css

scroll

css-position