使一個絕對定位的元素填充它的容器的寬度

Question

我有一個側欄，我已經絕對地定位到幾個理由。但問題是，如果我有一個較短的主要內容區域，側欄會超出內容。

有沒有辦法用CSS，我們可以讓容器將其高度包圍在邊欄上（如果邊欄更長）？

請本的jsfiddle：http://jsfiddle.net/52jjp/

Answer 1

這是不容易的 '清晰的' 絕對定位的元素。我發現這樣做的一個方法是在jQuery中獲取高度，然後將該高度應用於容器。例如：

$('#container').height($('#ab_positioned').height());

Answer 2

您可以設置min-height{...}到.main-content或.pad，如果側邊欄有一個固定的高度。

Answer 3

不幸的是，沒有辦法在直接CSS中做到這一點。當你絕對放置某物時，將其從文檔流中移除，因此它不再影響父級的高度。

你可以用javascript解決它，因爲@ scott-brown已經建議。

但是，我更喜歡所有的CSS解決方案。你可以使用清除，無論哪一方不再使用該標記的浮動側邊欄佈局：

<div class="page"> 
    <div class="content"> 
    Primary content here. 
    </div> 
    <div class="sidebar"> 
    Sidebar content here. 
    </div> 
</div> 

這個CSS：

.primary { 
    float: left; 
    width: 66%; 
} 
.sidebar { 
    float: right; 
    width: 33%; 
} 
.page:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    zoom: 1; 
} 

上.page的風格被稱爲clearfix（more details here）。

這個佈局技術的好處是，你可以交換.primary和.sidebar列不改變的標記，只是通過改變float:left至float:right，反之亦然。

clearfix還意味着父元素將包含子元素，所以如果需要，您可以在.page上設置背景顏色，並且它將一直延伸到任何較長列的底部。