CSS:最后一个子元素的高度应该基于之前的兄弟元素而不是溢出父元素

Question

相关 JS Fiddle http://jsfiddle.net/arosen/FMQtR/

问题

我的 HTML 看起来像这样:

<div id='parent'>
  <div id='one'>
    A variable amount of text here.
  </div>

  <div id='two'>
    A less important variable amount of text here.
  </div>
</div>

#parent div 是固定高度，不能改变。在其中，我至少有两个子 div。第一个(或多个)将包含未知数量的文本来确定其高度。基于第一个的内容，我希望最后一个占据父级中剩余的高度但不溢出。

我当前的示例 CSS 是:

#parent {
    border: 1px solid #000;
    height: 150px;
    width: 150px;
}
  #one, #two {
    border: 1px dashed #333;
    height: auto;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
  }

我目前的 JS 解决方案

function() {
  var $two = $('#two');
  var $parent = $('#two').parent()
  $parent.css('overflow', 'hidden');
  var heightDifference = $parent[0].scrollHeight - $parent.height();
  $two.css('height', $two.height() - heightDifference);
}

我想知道是否有解决此问题的 CSS 布局或 HTML 解决方案，或者我是否必须使用我在按下最后一个按钮时运行的 fiddle 中的 JS 解决方案。

编辑 更新了我的 JS fiddle ，因为文本在页面上不会更改一次，但取决于从服务器加载的信息，不知道它会有多少文本直到页面呈现。

EDIT 2 仅需要支持现代(和 IE 9)浏览器。

编辑 3 最终的 div 必须有一个高度，因为它被其他 jQuery 插件使用。

Answer 1

没有。你不能。 CSS 不是一种编程语言。取而代之的是每个 selector{ property:value; } 元组定义一组特定元素的规则。当前高度、当前宽度或其他属性等实际样式无法在 CSS 中访问。

有人可能会想“百分比值呢”？嗯，这些基于包含 block ，通常是父元素(在本例中为 #parent)。

因此，您要么必须为所有 div 指定固定高度(根据您提供给我们的信息，这是不可能的)，要么使用基于 JavaScript 的解决方案。