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>

CSS可滚动百分比div

1 个答案: