绝对定位的 div 不会获得浮动子内容的高度答案

【问题标题】：Absolute positioned div won't get height of floated child content绝对定位的 div 不会获得浮动子内容的高度
【发布时间】：2013-02-06 14:10:56
【问题描述】：

我已经为此苦苦挣扎了一段时间，我很困惑（并且可能遗漏了一些明显的东西）。我有一个带有绝对定位 div 的页面，在绝对定位 div 内，有两个向左浮动的内容 div。左侧内容 div 的高度为 1200px（基于其中的内容）。我希望右侧的 div 与其左侧的 div 高度相同，但我无法做到这一点。右侧 div 的高度与其父级（绝对定位的 div）的高度相同，即 530px。如果我上链，body 和 html 也是 530px（它们都被称为 height: 100%）。我在包含两个浮动 div 的绝对定位 div 的末尾放置了一个 clear 的 div，什么都没有。

这让我发疯了。我将包含一些 HTML 来说明发生了什么：

<html>
<head></head>
<body> <---- height 100%
<div id="container">
     <div id="header">
     </div>
     <div id="content"> <--- Absolute div, height 100%
          <div id="left-column"><---- float left
          </div>
          <div id="right-column><---- float left
          </div>
          <div class="clear"></div> <--- cleared div
     </div>
</div>  
</body>
</html>

【问题讨论】：

把position:relative放到容器上？你的 CSS 在哪里？

标签： html css

【解决方案1】：

我认为你真正的问题是

我希望右边的 div 与其左边的 div 高度相同

对吗？

如果是这样，您可以在这里找到解决方案：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

【讨论】：