CSSのスクロール可能なパーセンテージdiv

Question

divがあり、垂直スクロールバーがあります。しかし、私はできる限りページ上でできるだけ多くの垂直スペースを占有するためのdivをしたいと思い

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

：

これまでのところ、私は正常に動作し、以下のCSSを使用していました。これはページの最後の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>