CSS прокручиваемый процентный див

Question

У меня есть div, который я хотел бы иметь вертикальную полосу прокрутки.

До сих пор я использовал следующий css, который отлично работает:

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

Однако я бы хотел, чтобы 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>