Div高度/溢出問題

我遇到的問題是我的頁面頂部有兩個div，一個包含重複的藍色背景，另一個包含背景圖像。Div高度/溢出問題

我必須設置兩個div的高度，以便它們垂直擴展，不隨內容擴展。我在右側設置了溢出的形式。我相信這是造成問題的原因。

我已經嘗試沒有在代碼中的高度CSS，但它仍然不會垂直擴展。

爲了讓背景顯示出來，我必須手動設置高度。

這是網頁：http://www.repipespecialists.com/landing/google/repiping.html

這是CSS代碼：

#top_container { 
    width:100%; 
    height:1040px; 
    background-image:url(../images/top_bg_repeat.jpg); 
    background-repeat:repeat-x; 
    background-color:#83b4e9; 
} 

#top_header { 
    width:1200px; 
    height:1040px; 
    background-image:url(../images/header_bg.jpg); 
    background-repeat:no-repeat; 
    background-color:#83b4e9; 
    margin: 0 auto; 
}

來源

2012-07-24 user1454988

很抱歉，但我不知道我明白你正在努力去做。你能不能把你有什麼和你想要得到的東西相提並論？相關標記和CSS（或簡化示例）的代碼片段也會非常有用。 – Zhihao 2012-07-24 01:18:50

我想獲得top_container和top_header divs，以自動垂直擴展內容。相反，我不得不指定高度 – user1454988 2012-07-24 01:25:42

我認爲這個問題是您在 'left_content' 和 'right_content'

使用「溢出使用float ：隱藏「在包裝div中。

來源

2012-07-24 01:31:02 WDan

，所以我應該使用左對齊和右對齊？ – user1454988 2012-07-24 01:44:01

我WDan在你所遇到的問題是同意因您的left_content和right_contentdiv元素使用float: left和float: right。

當你在一個元素上使用float時，你基本上將它從正常的文檔流中移除。默認情況下，元素將按照您在標記中指定的順序出現在頁面上。使用float（或諸如position: absolute之類的東西）將從該「順序」或「文檔流程」中移除元素，使得當將其他元素放置在其頁面上的默認位置時，浮動元素將被忽略。

由於這些浮動元素所使用的空間被忽略，因此在確定其自身大小時，不會考慮浮動元素的大小。這就是爲什麼你的div不會自動擴展。

float的另一種替代方法是使用display: inline-block。這裏有一些鏈接，您可以閱讀更多瞭解的差異：

來源

2012-07-24 02:18:15 Zhihao

+1也嘗試使用谷歌搜索如何「清除浮動」。 – brains911 2012-07-24 05:06:22

Div高度/溢出問題

回答

相關問題