設置div的高度，但保持流暢

我有一種情況，我需要使div的大小與絕對定位的側欄相同。我使用這一點jQuery對它進行了排序;設置div的高度，但保持流暢

$('#main').height('auto'); 
top_height = $('.toolbar').outerHeight(); 
side_height = $('#RightSideBar').height(); 
body_height = $('#main').innerHeight(); 
console.log(body_height + ' ' + side_height); 
if (body_height < side_height){ 
    $('#main').height(side_height + top_height); 
} 
else { 
    $('#main').height(body_height); 
}

由於某些頁面上某些內容的動態特性，我遇到了一個新問題。由於#main的高度是絕對設置的，如果其內容的大小增加，div的大小不會隨之增加，反之亦然。

我需要將div設置爲與側邊欄高度相同並保持其內容流暢。所以div會增加和減少高度，直到邊欄的高度。

我希望這很容易理解，如果不是這樣的話。

來源

2014-02-13 Jacob Windsor

你說的主要內容的高度不應大於短邊欄，但需要能夠增長，如果其內容更大？ – willanderson

@willanderson正是！但是這需要是動態的 –

你可以做到這一點，沒有JavaScript。你需要一個相對定位的父母，將自動調整大小到側欄，然後是一個絕對定位的div，採用父母的100％高度。永遠不會有一定的高度，永遠是流動的。的

DEMO http://jsfiddle.net/nSBaA/1/

#wrapper { 
    position: relative; 
} 
#main { 
    position: absolute; 
    height: 100%; 
    width: 70%; 
} 
#sidebar { 
    float: right; 
    width: 20%; 
}

來源

2014-02-13 20:49:10 Vector

這不會像'＃main' div那樣工作，它絕對只是側邊欄的大小，並且不會因其內容而延長 –

請看這個你的小提琴的編輯版本，你應該看看我的意思[小提琴]（http://jsfiddle.net/nSBaA/6/） –

然後你可以改變顯示屬性爲'display：table-cell' DEMO http://jsfiddle.net/LFEF5/40/ – Vector

，而不是與你的計算設定的#main的height，嘗試設置min-height：

if (body_height < side_height){ 
    $('#main').css('min-height', side_height + top_height); 
} 
else { 
    $('#main').css('min-height', body_height); 
}

來源

2014-02-13 23:02:45 willanderson

設置div的高度，但保持流暢

回答

相關問題