2

这是我的 HTML 结构：

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

'controller' 和 'preview' div 中的内容可能会有所不同，因此内容的高度也会有所不同。“控制器”和“预览”div 的高度之间没有必要存在关联。在给定的包装器中，一个可能是 10px 高，而另一个是 100px 高。我希望较小的一个扩展以匹配较小的高度。使用“height: 100%;”的css规则 不起作用，因为没有为包装器设置明确的高度，而且我无法为包装器设置高度，因为其中的内容可能会有所不同。

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

4

3 回答 3

2

对 div 使用 100% 高度只会占用 div 所需的内容。您必须明确设置高度。

您可以通过使用一些 javascript 来做到这一点：

var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';
于 2012-04-11T14:02:54.917 回答
2

它可以用脚本设置，或者当你不想使用 JS 时，你可以使用仿列技术：

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

于 2012-04-11T14:04:30.063 回答
1

假设两个 div 彼此相邻（使用浮点数或其他），这在 HTML 中是一个非常常见的问题，但仍然没有原生解决方案。

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

如果您确实需要高度相同（出于在两个 div、背景图像上使用相同边框的原因，甚至在 div 内都需要位于 div 底部的定位元素），您将不得不使用一个javascript解决方案。

于 2012-04-11T14:08:22.160 回答