我有一个 div,我想要一个垂直滚动条。
到目前为止,我使用了以下 css,效果很好:
.mywrapper {
max-height: 300px;
overflow: auto;
}
但是,我希望 div 在页面上占据尽可能多的垂直空间。由于这是页面上的最后一个 div,如果可能的话,我希望它一直向下延伸到底部。
最佳答案
当然,你不能这样做。 body 的高度取决于它所包含的内容。
但是,一个简单的快速修复方法是将其添加到您的 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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9201365/