父母div的高度爲零，即使它有有限高度的孩子

我有一個網站，其佈局顯示在圖中。該機構由main container組成，其包括header,parent div和footer。如圖所示，parent div還包含若干個child div。父母div的高度爲零，即使它有有限高度的孩子

Webpage Layout

的問題的所有child div是高度是有限的。但parent div只包含子div。所有子div都可見，但父div的高度顯示爲零。我也沒有通過提供一些預先確定的價值來確定母公司的高度，因爲如果未來孩子的數量增加，它可能導致錯誤。

由於父div的大小爲零的問題是，我的頁腳div正在上升，並與父div的內容發生衝突。這可以通過給出一個合適的margin-top來解決，但這不是我正在尋找的解決方案。

任何人都可以建議我一些方法，以便父div的高度根據存在的子div的高度自動更改。

如果我不清楚詢問我的疑問，請發表評論！

來源

2012-09-22 Prashant Singh

請給我們您當前的CSS。另外，我猜對了，你的孩子div使用'float：etc'？ – Daedalus

添加溢出：隱藏;給父母。 – Tom

好像你有一個案例clearfix class。

所以我猜你是浮動的小孩div，這就是爲什麼父div的高度爲0. 當你使用浮動，父母不適應孩子的高度。

但添加class'clearfix'（當然你需要在你的樣式表中），它會添加一個'。'。在最後（當然不可見），你的父母會神奇地擁有正確的身高。

請注意，它是跨平臺，兼容的IE6 +，Chrome，Safari，Firefox，您可以將其命名！

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

來源

2012-09-22 04:04:52

嘗試添加以下到您的樣式表：

#parentdiv:after { 
    content: " "; 
    display: block; 
    clear: both; 
}

如代達羅斯在他的評論暗示，你可能漂浮在孩子的div。如果是這樣，上面的行修復它。

浮動的問題是他們的父元素「忽略」他們。

上面的代碼創建一個（僞）元素並將其插入到#parentdiv中，該元素被推下所有浮動div。然後，父div雖然忽略浮動的子元素，但並不忽略這個僞元素 - 按照它應該的方式進行操作，它會展開以包含僞元素。現在，由於僞元素低於所有浮動子元素，所以父元素髮生，或者更好，似乎也「包含」浮動的子元素 - 這真的是你想要的。

來源

2012-09-22 04:01:16 banzomaikaka

與其他答案結合後，你的回答和解釋非常明確 – Dinesh

這應該是正確的答案。更清晰簡潔。 – jimasun

父母div的高度爲零，即使它有有限高度的孩子

回答

相關問題