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

Problem

我的 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 解决方案来解决这个问题，或者我是否必须使用我在按下最后一个按钮时运行的小提琴中的 JS 解决方案。

EDIT按照文本内容更新了我的 JS 小提琴not在页面上更改一次，但根据从服务器加载的信息，在渲染页面之前不会知道它将有多少文本。

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

EDIT 3最后的分区must有一个高度，因为它被其他 jQuery 插件使用。

不，你不能。 CSS 不是一种编程语言。相反，每个selector{ property:value; }元组定义了一组特定元素的规则。实际样式（例如当前高度、当前宽度或其他属性）无法在 CSS 中访问。

有人可能会想“百分比值怎么样”？好吧，这些都是基于包含块，通常是父元素（在本例中#parent).

所以你要么必须为所有指定一个固定的高度div（根据您提供给我们的信息，这是不可能的），或者使用基于 JavaScript 的解决方案。