html - 我怎样才能有一个 html 表，其中只有大于屏幕时才会出现垂直滚动条

Question

我有一个网页，网页中间有一个 html 表格。有时有很多行，所以我希望表格(不是整页)添加一个垂直滚动条。如果表格没有离开页面，我不想显示垂直滚动条。我也不想为表格的高度硬编码一个特定的像素。

实现此目标的最佳方法是什么？我需要支持回 IE7

Answer 1

在更新的浏览器上，您可以使用 vh 根据窗口高度设置表格高度，对于不支持 vh 的浏览器回退到 px :

/* wrap your table in this */
.table-wrap {
  max-height: 300px;
  max-height: 70vh;
  overflow-x: scroll;
}

Live demo (click).

这是一个您可能感兴趣的 jQuery 演示。如果可以使用 vanilla js 轻松完成，那么仅仅为此包含 jQuery 是不值得的。这只是一个快速示例。 <强> http://jsbin.com/OWewECAW/7/edit

$wrap = $('.table-wrap');
var offset = $wrap.offset();
var bottom = offset.top + $wrap.height();
var w = $(window).scrollTop() + $(window).height();
var newHeight = $wrap.height() - (bottom - w);
$wrap.css('max-height', newHeight);