如何将容器 div 的大小调整为其子项的总高度？

Question

我有一个容器元素，我需要在其内容更改时调整它的大小。它包含 2 个绝对定位的 div，它们都可以改变高度。如果我没有指定容器的高度，那么容器之后的任何内容都会消失在内容之下。

目前我正在执行以下操作，但我很乐意找到一个不那么费力的替代方案：

（容器有 position:relative，#main 和 #sidebar 是 position:absolute，#sidebar 的内容没有指定定位）

css:

div#mapcontainer { position:relative; width:100%; height: 600px;  }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}

html:

<div id="container">
    <div id="main">variable height content here</div>
    <div id="sidebar">
       <div id="foo">...</div>
       <div id="bar">....</div>
       ...
    </div>
<div>

js:

fixHeights = function() {   
    var children_height = 0;  
    $('#sidebar'). children().each(function(){children_height += $(this).height();});
    $('#container').height(Math.max(children_height, $('#main').height()));
};

Answer 1

这是一个非常奇怪的问题，因为 div 的高度始终是其子项的高度。

您是否在容器 div 中浮动内容？当您浮动子内容时，包含 div 的行为不再相同。

如果您的浮动内容超出了容器 div 的底部，请将以下 div 添加到容器 div 子级的最底部：

<div style="clear:both;"></div>

这将不允许孩子漂浮在它上面，从而迫使包含的 div 成为其最高孩子的高度...

<div id="container">
  <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
  <div id="static" style="margin-left:104px;">Lots of static stuff here</div>
  <div style="clear:both;"></div>
</div>

---

好的，我不知道您为什么要按现在的方式进行定位，但我已经为一个看起来像桌面应用程序的网站做了类似的事情。我不相信除了使用 javascript 之外还有其他方法可以做到这一点。 Html 文档旨在流动，而不是僵化。如果您想放弃 javascript，则必须放弃定位样式并使用浮动和清除 div。它没有那么可怕......

Answer 2

如果你浮动容器 div "overflow: auto" 也可以神奇地工作，尤其是对于整个 IE hasLayout 崩溃

Answer 3

您没有指定，但我认为您遇到了浮动元素的问题，并且您希望它们所在的容器至少是最大浮动元素的大小。您应该尝试以下 CSS hack，它会强制浏览器将容器元素的大小重新渲染为浮动元素的大小：

#wrapper:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

让我知道你想出了什么，如果这可行。取决于您的浏览器，还有许多其他黑客可以尝试。

Answer 4

我会尝试更改 css 以不使用绝对定位。在 Firefox 中，您需要使用 cmets 中提到的包装技巧来使 mapcontainer 具有正确的高度。

div#mapcontainer { clear:both;宽度：100%；最小高度：600px； }

div#main { float:left;左边距：10px；宽度：500px；高度：400px； }

div#sidebar { float:left;边距顶部：10px；边距右：10px；宽度：155px；高度：405px;}

Answer 5

Overflow:visible; 那是票。 overflow:auto 将在需要时创建一个滚动条。