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/ (нажмите Play)

Код:

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>