Question

这是我的HTML结构：

<li>
     <div class='wrapper'>
          <div class='controller'> ... </div>
          <div class='preview'> ... </div>
     </div>
</li>

“控制器”和“预览”div中的内容可能会有所不同，因此内容的高度也可能不同。 “控制器”和“预览”div的高度之间没有必要相关。在给定的包装中，一个可能是10px高而另一个是100px高。我希望较小的一个扩展以匹配较小的一个的高度。使用css规则“height：100％;”不起作用，因为没有明确的高度设置到包装器，并再次我不能设置包装器的高度，因为它内部的内容可能会有所不同。

我正在寻找一个css而不是javascript的解决方案。我的公司对没有启用javascript的浏览器有严格的编写政策。

Answer 1

对div使用100％高度只会占用div所需的内容。你将会有明确设置高度。

您可以使用一些javascript：

来完成此操作

var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';

Answer 2

可以使用脚本设置，或者当您不想使用JS时，可以使用虚拟列技术：

http://www.alistapart.com/articles/fauxcolumns/

Answer 3

假设两个div彼此相邻（使用float或其他），这是HTML中一个非常常见的问题，仍然没有本机解决方案。

解决此问题的一种方法是人造柱，但这有其局限性：通常使用非常宽的边框来伪造较小div的背景颜色，因此您只能使用纯色。

如果你真的需要高度相同（为了在两个div上使用相同的边框，背景图像，甚至div中的定位元素都需要在div的底部）你会必须使用JavaScript解决方案。

当div设置它的父级高度时，将div设为100％的容器

3 个答案: