身體不擴大，包括相對定位的元素

我試圖設計一個相對定位的div，這反過來將包括兩個div s。孩子div都沒有一個固定的高度，但它們隨着內容的不同而不同，所以父母div隨着孩子div的高度擴大。現在設計工作正常，但是當我使用Firebug分析代碼時，我發現在螢火蟲上的標籤上徘徊時，只有整個屏幕的一小部分顯示爲主體。側面板證實了它，身體的寬度是好的，但高度爲0.這意味着父div的高度爲0，但Firebug告訴我它不是，它是大約560px。這怎麼可能？我知道，如果內容絕對定位，元素不會隨其內容而擴展，但此處兒童div s是相對定位的，那爲什麼父母沒有擴展其內容？小提琴在http://jsfiddle.net/Cupidvogel/y79NS/6/。釷截圖（請放大瞭解我的觀點是，當我嘗試代碼爲Firefox中一個完整的HTML頁面！）：身體不擴大，包括相對定位的元素

enter image description here

來源

2012-08-03 SexyBeast

的''.main'是div'給予正確的高度，但身體所賜的0 – SexyBeast 2012-08-03 13:23:32

的高度是啊，對不起，我沒有密切足夠注意的問題並認爲這個問題與你的外部'div'而不是'body'有關。我確實在body元素上看到了相同的效果。確切地說， – JAB 2012-08-03 13:24:44

。這怎麼可能？ – SexyBeast 2012-08-03 13:26:59

這裏發生的事情是普通的瀏覽器行爲，你浮動的div，所以沒有在'正常'流程，因爲浮動屬性。所以身體是身高0，因爲身體不能計算'不在那裏'的元素的高度。

將div class =「clear」移出div class =「main」並刪除浮動屬性以及div class =「clear」，問題解決了。

觀點：http://jsfiddle.net/y79NS/8/

來源

2012-08-03 14:00:27 Mark

是的，它確實有效？但是怎麼來？ '.clear'元素應該清除上面的浮動元素，在這種情況下，它位於父容器本身之外，它如何使主體擴展爲覆蓋父容器？ – SexyBeast 2012-08-03 14:17:11

，因爲它位於沒有「維度」的元素中，因爲浮動，一旦在浮動元素之外，並且您的身體標記可以計算其高度。 – Mark 2012-08-04 21:49:44

在你的CSS，div.clear - 你正在使用，以試圖清除漂浮物 - 本身漂浮在左邊。這意味着它不是文檔流程的一部分，因此無法清除任何內容。

刪除float的伎倆：

.clear { width: 400px; clear: both; position: relative; }

另外，如果你想div.clear被浮動出於某種原因，there are a wide variety of other ways to clear your floats。

編輯：div.main有520px的高度，因爲它是浮動和浮動的元素「咬合」他們的孩子的維度。如果你將body左移（請不要;這不是一個好主意），它也會「抓住」它的孩子的尺寸，並具有520px的設置高度。

來源

2012-08-03 13:21:50 ajm

對不起，'clear'部分完全是多餘的，我忘了將它從小提琴代碼中移除。但是這並不能解決我的問題。 – SexyBeast 2012-08-03 13:25:41

刪除'div.clear'規則列表中的'float：left;'位使得body元素在我執行時具有正確的高度。但是，刪除'clear：both''實際上會導致問題_again_。所以不，「清」是多餘的。 – JAB 2012-08-03 13:30:08

不，我試過了，它仍然顯示相同的東西。 – SexyBeast 2012-08-03 13:32:06

身體不擴大，包括相對定位的元素

回答

相關問題