CSS滾動百分比div

Question

我有一個div，我想有一個垂直滾動條。

到目前爲止，我已經使用了下面的CSS，工作正常：

.mywrapper { 
    max-height: 300px; 
    overflow: auto; 
} 

不過，我想div來承擔儘可能多的垂直空間的頁面上儘可能。由於這是頁面上的最後一個div，因此如果可能，我希望它一直延伸到底部。

Answer 1

你不能這樣做，自然。身體只與其包含的內容一樣高。

但是，一個簡單的速戰速決將加入給你的CSS：

html,body { height: 100%; margin: 0; padding: 0; } 

---

至於延長，我已經把一個快速腳本（使用jQuery）出現做你正在尋找。

請參閱：http://jsfiddle.net/UB7uT/（點擊播放）

代碼：

CSS：

html,body { height: 100%; margin: 0; padding: 0; overflow: hidden; } 

.mywrapper { 
    overflow: auto; 
    max-height: 100%; 
} 

的JavaScript：

function my_initialize_footer_box_absolute_height_scroller(selector) { 
    var box = $(selector); 
    var boxPosition = box.position(); 
    var boxTop = boxPosition.top; 
    var boxHeight = box.height(); 
    var boxNewHeight = (+boxHeight) - (+boxTop); 
    box.css('height', boxNewHeight+'px'); 
} 

$(function() { 
    my_initialize_footer_box_absolute_height_scroller('.mywrapper'); 
}); 

HTML：

<p>some content here first.</p> 
    <p>some content here first.</p> 
    <p>some content here first.</p> 
    <p>some content here first.</p> 
    <hr> 
    <div class="mywrapper"> 
    foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br> 

    </div>