Question

我想设置一个表的大小，以便我可以在行滚动使用。因此，桌面高度需要是页面的剩余高度，但永远不会变大。而且我不想像像素大小这样的硬盘。我希望它根据窗口大小而变化。有谁知道这个css？

Answer 1

您可以使用vh单位，但如果您希望表格高度为＆＃34;页面的剩余高度，则需要为页面上的布局元素指定高度。

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

<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>

Answer 2

这可以使用Javascript完成，也可以尝试以下代码：

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

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

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

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

2 个答案: