Question

我有一行div必须都是相同的高度，但我无法知道该高度可能提前（内容来自外部源）。我最初尝试将div放在一个封闭的div中并将它们向左浮动。然后我将它们的高度设置为“100％”，但这没有明显的效果。通过将封闭div上的高度设置为固定高度，我可以将浮动的div扩展，但只能达到容器的固定高度。当其中一个div中的内容超过固定高度时，溢出;浮动的divs拒绝扩张。

我用Google搜索了这个浮动的div-of-the-height-problem问题，显然没有办法使用CSS。所以现在我试图使用相对和绝对定位的组合而不是浮点数。这是CSS：

<style type="text/css">
div.container {
  background: #ccc;
  position: relative;
  min-height: 10em;
}
div.a {
  background-color: #aaa;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 40%;
}
div.b {
  background-color: #bbb;
  position: absolute;
  top: 0px;
  left: 41%;
  bottom: 0px;
  width: 40%;
}
</style>

这是HTML的简化版本：

   <div class="container">
    <div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
    <div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
   </div>

这是有效的，除非你将最小高度改为像5em这样的东西（展示当内容超过最小高度时会发生什么），你可以看到，虽然文本没有被截断，但div仍然拒绝扩展。现在我输了。有没有办法用CSS做到这一点？

Answer 1

这是你可以在理想主义或现实之间陷入困境的那一刻。我理解，出于格式化的原因，将非表格数据放在表格中没有语义价值，但是我不希望看到你向后弯曲以便为这个问题创建一个非表格式的解决方案。“ / p>

我是第一个击落非语义设计的人，相信我，但有时你需要面对CSS +语义标记不适用于所有设计场景的事实。我不知道这个网站的可访问性需求，但我建议你寻找一个更实际的解决方案来解决这个问题。

欢迎您以正确的方式接近这一点并寻找解决问题的正确方法！不幸的是，这是CSS的一个黑暗角落（以及一个块内的垂直定位），如果没有虚拟列，javascript或表格单元格，这是不可能的。

无论您选择哪种方式，请不要为了自己的利益而遵守标准。

Answer 2

使它们完全相同的高度可能是一个棘手的事情，但如果它们只是看起来是相同的高度，你可能想看看faux columns技术。

我尝试了其他一些方法，但这是我发现获得效果的最可靠方法，当然除了使用表格。

Answer 3

您可以使用JavaScript，但当然它会在没有启用JavaScript的情况下中断。然后是表格，但这破坏了CSS的重点。也许seanb's answer可以工作，放置一个背景图像，产生所有列都到底的错觉。这被称为虚假背景技术。

或者坐下来等待所有/大多数浏览器都支持display: table-cell。

Answer 4

好吧，表格的结果比我想象的要复杂一点。事实证明，Javascript解决方案实际上是最简单的（对于我的情况），因为我的应用程序是一个AJAX应用程序，框架使用Prototype.js。所需要的只是几行JS：

$$('div.container').each(function (element) {
 var longest = 0;

 element.descendants().each(function (child) {
  if (child.getHeight() > longest)
   longest = child.getHeight();
 });

 element.descendants().each(function (child) {
  child.style.height = longest + 'px';
 });
});

再次感谢您的帮助。

Answer 5

谢谢你的回答，伙计们。我不认为背景图像会起作用，因为列的宽度也可以根据有多少列（用户可以更改它）而变化。我想我会用桌子:(

Answer 6

如果您正在寻找一个纯粹的css选项，并且您可以从内容中分离块的背景，那么答案是两个，每个块有两位代码，一个用于内容，一个用于背景。这就是它的完成方式：

<div id="wrapper">
  <div class="content" id='one>
  <div class="content" id="two>
  <div class="content" id="three>
  <div class="background" id="back-one">
  <div class="background" id="back-two">
  <div class="background" id="back-three">
</div>

使用浮点数定位内容div。然后使用绝对定位（和z-index将它们放在后面）来定位背景

这是有效的，因为浮点数可以设置高度，绝对定位的元素可以有100％的高度。这有点乱，但是能完成这项工作。

使用CSS将一行div设置为相同的高度

6 个答案: