jquery - 如何用正确的行数填充表格以适应不同屏幕分辨率的页面高度？

Question

我在前端开发了自己的 Web-Admin。这是一个典型的 Admin 容器，左侧是一个菜单导航，右侧是正文内容，显示与单击的菜单项相关的结果（通常是表格）。

为了使正文页适合 100%，获得表中正确数字或行的最佳方法是什么？

就我而言，我已经看到在更改屏幕分辨率时填充表格空间所需的拖车数量是不同的。

我知道一个快速的解决方案可能是计算分辨率并在知道屏幕分辨率后填充表格。我想知道是否可以在运行时根据屏幕分辨率或其他方式设置 TD 或 TR 高度。

谢谢，

Answer 1

这是一个小提琴，它演示了取决于浏览器 innerHeight 的行渲染。

HTML

<table id="mytable"></table>​

CSS

td {
  height:20px;
}​

JavaScript

var numberOfRows = Math.floor(window.innerHeight / 20);

var table = document.getElementById("mytable");

function createCell() {
    var cell = document.createElement("td");
    cell.innerText = "Cell";
    return cell;
}

function createRow() {
    var row = document.createElement("tr");
    row.appendChild(createCell())
    return row;
}

for (var i = 0; i < numberOfRows; i++) {
    table.appendChild(createRow());
}​

PS。1我已经在 CSS 中设置了单元格的高度，这可以通过不同的方式完成
PS。2我已经确定了适合屏幕的行数。所以底部会有一些空白空间。