Question

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

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

Fiddle（不需要边框和边距）

＆＃13;

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

＆＃13;

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

＆＃13;

我怎样才能使这个设计工作？或者，或者，我怎么可能重新组织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 flexbox。我添加了<div class="scrollable-wrapper">以使您可以实现的布局成为可能。

查看代码段中的注释，这很容易理解。因此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>

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

2 个答案: