一个 block 内的CSS两个元素自动高度

Question

我试图将两个 block 放入一个固定高度的 block 中以创建以下布局:

------------------------

UL(初始高度=0)，

在添加元素时增长，直到达到最大高度

滚动应该在达到最大高度后添加

------------------------

DIV(初始高度=父级的100%)

减少直到达到最小高度

------------------------

布局的 HTML 部分:

<div style="height:100px">
  <ul style="max-height:70px;height:auto;overflow:auto"></ul>
  <div style="min-height:30px;height:auto">
    <span>TEST CONTENT</span>
  </div>
</div>

Answer 1

你真的不能只用 CSS 干净利落地做到这一点。我建议为此使用一些 jQuery，您只需在任何给定时间查询两者的高度，找出哪个更高，然后将另一个元素设置为匹配