CSS絕對位置元件延伸背景

Question

我有一個重疊的容器背景上的絕對位置的div由於具有較大高度它。這個div與一個身體愉快地坐在它左邊的body div共享容器。

有沒有一種方法來擴展容器是絕對定位的div的高度，而不是主體內容？

或者我應該只是浮動並排的div側，在兩個底部卡盤<div style="clear: both"></div>？似乎是一個凌亂黑客獲得的容器來擴展：/

編輯：似乎註釋不喜歡代碼的結構。所以我會在這裏編輯它。

的佈局是：

<div id="content"> 
    <div class="container"> 
     <div id="header"></div> 
     <div id="main"> 
     <div id="column-1"></div> 
     <div id="column-2"></div> 
     </div> 
    </div> 
</div> 

#content具有重複的背景和#container的設定頁面的固定寬度。 #header座標爲鏈接，#main包含頁面的主要內容的兩列。我不能讓這些兩列相鄰（浮點/絕對），同時具有#content's背景重複他們下面

Answer 1

通過這一佈局，坐：

<div id="content"> 
    <div class="container"> 
    <div id="header"></div> 
    <div id="main"> 
     <div id="column-1"></div> 
     <div id="column-2"></div> 
    </div> 
    </div> 
</div> 

你的基本的CSS應該是這樣的：

html, body, div { margin: 0; padding: 0; border: 0 none; } 
body, #content { height: 100%; } 
#main { overflow: hidden; } 
#column-1 { float: left; width: 300px; } 
#column-2 { float: left; width: 600px; } 

你說你想要背景圖像出現在內容下面。從這裏我假設你的意思是你想讓頁面成爲全屏高度（最小）。

的絕對定位的一點是，它會從正常流動的元素，以便不，你不能把它的「容器」擴展到包括它，因爲在技術上它沒有容器。

絕對定位有其一席之地，但9次了10年，我得到了基於浮動的佈局更好的結果。但如果沒有更多的信息，我不能多說。