一格div动态高度一格剩余高度并滚动 [英] One div dynamic height one div remaining height and scroll

问题描述

I have 2 divs inside a parent:

foo1 会有一个动态高度，所以我不能使用下面的样式：

<div class="parent"> <div class="foo1"></div> <div class="foo2"></div> </div>

foo1 will have a dynamic height, so I can't use the style below:

现在，我想要做的是确保较低的子 foo2 永远不会扩展到父div之外，并显示滚动条是否太大。我宁愿选择CSS解决方案。

height: calc(100% - foo1Height);

推荐答案

您可以使用 flexbox 。没有标记变化。

解决方案

或者使用 CSS表格，其他标记为

< pre class =snippet-code-css lang-css prettyprint-override> .parent {display：table;宽度：100％; height：100px;}。foo1，.foo2 {display：table-row;}。cell {display：table-cell; position：relative;}。foo2 {height：100％; / *展开以适应* / background：silver;}。scroll {position：absolute; top：0;底部：0;左：0;正确：0;溢出：自动; / *根据需要滚动* /}

<div class="parent">
  <div class="foo1">
    <div class="cell">1</div>
  </div>
  <div class="foo2">
    <div class="cell">
      <div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
    </div>
  </div>
</div>

这篇关于一格div动态高度一格剩余高度并滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！