Question

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

目前我正在做以下事情，但我很高兴找到一个不太费力的选择：

（容器有位置：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中，您需要使用注释中提到的包装技巧来使mapcontainer达到正确的高度。

div＃mapcontainer {clear：both;宽度：100％;最小高度：600px; }

div #main {float：left; margin-left：10px;宽度：500px;身高：400px; }

div＃sidebar {float：left;边距：10px的;保证金权：10px的;宽度：155px;身高：405px;}

Answer 5

Overflow:visible;这是票。如果需要，overflow:auto将创建一个滚动条。

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

5 个答案: