設定最高高度列出流體寬度內容

我有以下http://jsfiddle.net/4G33W/1/設定最高高度列出流體寬度內容

這是流動的，因爲它是和工作正常，但是當更多的項目加入到#commentWrapper列表，它打破了佈局它推動整個事情「向下」。

要測試複製一些<li>test</li>項目，你會明白我的意思。我希望輸入框保持在底部（因爲它是atm），當列表變得足夠長並達到它時，列表應該進入「overflow-x：auto」模式。我不能使用固定的高度，因爲它會打破整個事情的「流暢性」，或者至少我嘗試的方式似乎不起作用。

這裏的任何CSS/HTML解決方案？我應該轉向JavaScript的解決方案？我也使用jquery，以防萬一任何答案都包含javascript。

來源

2013-09-25 Systemfreak

在這種情況下，可以使用純CSS來完成。運用這些規則爲#commentWrapper元素會做的伎倆：

#commentWrapper { 
    width: 17%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    box-sizing: border-box; 
    padding-bottom: 20px; 
    overflow-y: auto; 
}

在這裏工作的jsfiddle：http://jsfiddle.net/4G33W/2/

來源

2013-09-25 16:32:16 Bogdan

是的，它沒有工作，非常感謝幫助我:) – Systemfreak

很高興我能幫上忙。 @Willian Duarte也提出了一些非常好的觀點。我可以確認此解決方案適用於IE8 +和所有其他主流瀏覽器。（IE7以下版本的全球使用率不足5％，已經過時，所以我不鼓勵對它們的支持）。 – Bogdan

@Bogdan解決方案的工作，因爲「身高：100％;」當「位置：絕對的」時工作被設置。請注意您需要構建的佈局以及您需要支持的瀏覽器。

並且看can i use支持box-sizing。

來源

2013-09-25 17:26:19

噢好吧，謝謝你讓我知道:) – Systemfreak

+1爲解釋可能的警告。 – Bogdan

設定最高高度列出流體寬度內容

回答

相關問題