Question

我正在尝试创建一个可滚动的“小部件”。简化形式如下。

小部件（container）应该是固定高度，200px。
小部件的top应不具有固定的高度。
小部件的bottom应填充剩余高度，如果需要，任何溢出都应自动显示滚动条。

我认为这应该只适用于CSS。然而，我所做的所有谷歌搜索似乎总是在内部工作的某些部分使用固定的高度。这不是我要求的。

我知道这可以通过Javascript实现。再说一遍，这不是我想要的。

关于如何实现这一目标的任何想法？

.container {
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow: hidden;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>

Answer 1

使用CSS3 flexbox这样做非常简单。

只需将父元素设置为display: flex并添加flex-direction: column即可。这样，滚动条将添加到.bottom元素而不是父容器元素。

此外，height: 100%已添加到.bottom元素，以便在内容不足时填充剩余高度。

.container {
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  height: 100%;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia nimi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>

具有可滚动底部div的精确高度div，仅限CSS？

1 个答案: