CSS可滚动百分比div

发布于 2025-01-03 22:58:31 字数 215 浏览 0 评论 0原文

我有一个 div，我想要一个垂直滚动条。

到目前为止，我已经使用了以下 css，效果很好：

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

但是，我希望 div 占据页面上尽可能多的垂直空间。由于这是页面上的最后一个 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与君绝 2025-01-10 22:58:31

当然，你不能这样做。身体的高度取决于它所含的内容。

但是，一个简单的快速修复方法是将其添加到您的 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>

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>

回复收藏 0 原文

~没有更多了~