容器DIV沒有擴大到包括具有絕對定位的DIV

我想有一個簡單的解決方案，但它沒有我。如果你看看this page，你會看到只有頭部有灰色背景。灰色的背景是由#container的DIV設置，我想也延伸到了頁面的整個高度：容器DIV沒有擴大到包括具有絕對定位的DIV

#container { 
    padding: 0; 
    margin: 0; 
    background-color: #292929; 
    width: 1200px; 
    margin: 0 auto; 
}

目前它只是伸展在頁面的標題部分，和下面的內容不包含在其中。我想這是因爲＃內容DIV中的主要內容有絕對定位，爲了能夠對這個div的定位做一些動畫（你可以在懸停在導航欄圖像上時看到這個）：

#content { 
    font-family: Lucida sans unicode !important; 
    color: #CECBBB; 
    text-align: justify; 
    position: absolute; 
    top: 210px; 
    padding: 20px 40px; 
}

從一些研究，它似乎是絕對定位的DIV不包括在父母的DIV的高度，但我不知道如何解決這個問題。

我很感激一些幫助。

感謝，

尼克

來源

2011-12-11 Nick

如果你需要有#content絕對定位（如你在你的問題狀態），然後讓你的願望是，要麼把background-color: #292929上#content本身（你可能需要調整一些定位背景的最佳途徑，填充消除任何黑色）。

但是，如果動畫是在上懸停打開頂部的子菜單，那麼我建議設置菜單和內容的div來position: relative,，取而代之的動畫的#content的top位置（如你的腳本似乎是），爲菜單的height設置動畫（默認設置爲零，並生成45px高度的動畫[這就是螢火蟲顯示的高度可以打開]）。

來源

2011-12-11 12:10:28 ScottS

@尼克 - 它看起來像你到達那裏。我現在看到背景，而且你似乎正在研究懸停。我想你會像預期的那樣運作。 – ScottS

是的，我已經整理了背景，但是子菜單沒有按照我希望的方法工作。我想保留一個slideDown/Up和淡入淡出，但不能解決如何做到這一點。你可以看到我的問題[這裏]（http://stackoverflow.com/questions/8464707/script-to-animate-height-of-div-is-changing-the-height-of-div-suddenly）。 – Nick

是的，你說得對。元素絕對定位不再被視爲其父容器的佈局。爲了更好地理解它，我建議你閱讀CSS Positioning from A List Apart。

恕我直言，你有很多的解決方案：

使用浮動的，而不是絕對定位佈局
硬編碼container元素
使用JavaScript的高度，始終更新container元素的高度佈局。

來源

2011-12-11 11:42:23

FLOAT !!!謝謝你，先生！ – RozzA

#content { 
    color: #CECBBB; 
    font-family: Lucida sans unicode !important; 
    margin-top: 40px; 
    padding: 20px 40px; 
    text-align: justify; 
}

添加邊距，並刪除絕對會做到這一點的位置。

來源

2011-12-11 11:43:13

容器DIV沒有擴大到包括具有絕對定位的DIV

回答

相關問題