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

I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.

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

At the moment I am doing the following but I'd be pleased to find a less laborious alternative:

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

(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)

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

css:

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:

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:

JS：

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

5 个解决方案

#1

This is a very odd question, as div's height is always the height of its children.

这是一个非常奇怪的问题，因为div的高度总是它的孩子的高度。

Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.

你在容器div中浮动内容了吗？当您浮动子内容时，包含的div不再起作用。

If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:

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

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

That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...

这将不允许儿童漂浮在它上面，因此迫使包含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>

Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...

好吧，我不确定你为什么要按照自己的方式进行定位，但我为一个看起来像桌面应用程序的网站做了类似的事情。除了使用javascript，我不相信有任何办法可以做到这一点。 Html文档旨在流动，而不是僵化。如果你想在javascript上保释，你将不得不放弃定位样式并使用浮动和清除div。它并不那么可怕......

#2

if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle

如果你是浮动容器div“溢出：自动”也可以神奇地工作，尤其是关于整个IE hasLayout崩溃

#3

You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:

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

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

Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.

让我知道你提出了什么以及是否有效。根据您的浏览器，还有许多其他黑客可以尝试。

#4

I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.

我会尝试改变css而不是使用绝对定位。在Firefox中，您需要在注释中使用包装技巧，以使mapcontainer具有正确的高度。

div#mapcontainer { clear:both; width:100%; min-height: 600px; }

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

div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }

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

div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}

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

#5

Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.

溢出：可见;这是票。 overflow：auto会在需要时创建一个滚动条。

#1