CODEWITHSUNDEEP
cssscrollbaroverflow
JonoB
JonoB

Reputation: 5887

CSS scrollable percentage div

I have a div that I'd like to have a vertical scrollbar.

So far, I have used the following css, which works fine:

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

However, I would like the div to take up as much vertical space on the page as possible. Since this is the last div on the page, I'd like it to extend all the way down to the bottom, if possible.

Upvotes: 0

Views: 3474

Answers (1)

Ryan Briscall
Ryan Briscall

Reputation: 121

You can't do this, naturally. The body only goes as high as the content it contains.

But, a simple quick fix would be adding this to your CSS:

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

As for extending, I've put together a quick script (using jQuery) that appears to do what you're looking for.

Please see: http://jsfiddle.net/UB7uT/ (click Play)

Code:

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>

Upvotes: 1

Related Questions