如何調整一個容器div到其子女的總高度？

我有一個容器元素，我需要調整其內容更改的大小。它包含2個絕對定位的div，它們都可以改變高度。如果我沒有指定容器的高度，那麼容器後面的任何內容都會消失。如何調整一個容器div到其子女的總高度？

目前我做以下，但我很高興能找到一個更省力的選擇：

（容器具有位置：相對的，#main和#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())); 
};

來源

2008-11-25 Ken

這是一個很奇怪的問題，如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。它不是是可怕......

來源

2008-11-25 14:21:08 Will

我更喜歡在CSS中這樣做，而不是爲了重新設置而在頁面中添加額外的內容。 – 2008-11-25 14:30:29

對不起 - 在我澄清之前，我並不清楚並被打斷。我已經添加了關於定位的更多信息 – Ken 2008-11-25 14:54:08

如果你浮在容器格「溢出：汽車」也能正常工作神奇，尤其是關於整個IE hasLayout的崩潰

來源

2008-11-25 14:26:57 annakata

謝謝。試過，但它沒有奏效。我添加了定位信息以使問題更清晰。 – Ken 2008-11-25 15:08:15

沒有指定，但我認爲你在浮動元素方面存在問題，並且你希望它們所在的容器的大小至少是最大浮動元素的大小。你應該嘗試以下CSS黑客工具，強制瀏覽器的容器元素的尺寸重新呈現在浮動元素的大小：

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

讓我知道你想出的，如果這個工程。根據您的瀏覽器，還有許多其他黑客可以嘗試。

來源

2008-11-25 14:28:45

謝謝尼克。對不起，我不清楚。我添加了更多關於容器和內容定位的信息。包裝：之後沒有解決我的問題。 – Ken 2008-11-25 15:02:24

我會嘗試改變CSS不使用絕對定位。在Firefox中，您需要在註釋中使用提包技巧來獲取mapcontainer的正確高度。

div＃mapcontainer {clear：both;寬度：100％; min-height：600px; }

div＃main {float：left; margin-left：10px;寬度：500px; height：400px; }

div＃sidebar {float：left;邊距：10px的;保證金權：10px的; width：155px;高度：405px;}

來源

2008-11-26 03:58:09

Overflow:visible;這就是票。如果需要，overflow:auto將創建一個滾動條。

來源

2010-12-16 23:14:04 Greg

如何調整一個容器div到其子女的總高度？

回答

相關問題