7

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

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

编辑 2只需要支持现代（和 IE 9）浏览器。

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

4

2 回答 2

3

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

有人可能会想“百分比值呢”？嗯，这些是基于包含块的，它通常是父元素（在这种情况下#parent）。

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

于 2012-06-01T15:23:21.400 回答
0

如果您对边框/边距/填充/行高没有过多设置，则可以完成此操作。只要确保 (parent div - (all margins/padding)) 完全可以被您的行高整除，您就不会看到部分行或溢出。但是，使用您的边框样式，您无法仅通过 CSS 来实现这一点。

您仍然可以通过向父 div 添加另一个元素来破解它，例如带有虚线顶部边框和厚白色底部边框的段落标签，用上述解决方案定位以隐藏溢出的边框......但这很hacky，我不喜欢，并且有可能在浏览器之间轻松破解。

TL;DR - 只需使用您的 JS。

于 2012-06-01T15:52:24.823 回答