设置固定的 HTML 页面高度大小

Question

我想设置 table 的大小，以便我可以使用行内滚动。所以 table 高度需要是页面的剩余高度，但永远不会变大。而且我不想要像像素大小这样的硬修复。我希望它根据 window 大小而变化。有人知道这个 css 吗？

Answer 1

这可以使用 Javascript 完成，或者您可以尝试以下代码：

.myTable {
    position:fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

但是，您不能使用 height: 100%; 指令。尝试在嵌套在 <html> 或 <body> 中的 child 上直接使用它时，它不起作用。

编辑： 据我所知，height: 100% 指令不适用于嵌套在没有固定高度的元素中的任何元素。我的意思是，height: 100% 只有在它的 parent 被明确告知要多高（例如，height: 600px;）时才会起作用。

Answer 2

您可以使用 vh 单位，但如果您希望 table 高度为 "remaining height of the page"，则需要为页面上的布局元素指定高度。

什么是 vh？ 1vh 是视口高度的 1%，即页面加载时 window 内的高度。 100vh 是视口高度的 100%。我不相信调整 window 大小时会调整高度。

<style type="text/css">
div#header {
  height: 25vh;
  overflow: scroll;
}
div#table {
  height: 75vh;
  overflow: scroll;
}
</style>
<body>
  <div id="header">This text explains the contents of the table below.</div>
  <div id="table"><table>...</table></div>
</body>

设置固定的 HTML 页面高度大小

Set a fixed HTML page height size

html

css

page-size