如何在表格中填入正确的行数以适应不同屏幕分辨率下的页面高度？

Question

我在前端开发了自己的Web-Admin。这是一个典型的带有容器的Admin，一个菜单导航在左边，一个主体内容在右边，它显示与点击的菜单项相关的结果(通常是一个表)。

为了使正文页面达到100%的大小，在表格中获得正确的行数或行数的最佳方法是什么？

在我的例子中，我已经看到，在改变屏幕分辨率时，填充表中空间所需的拖曳数量是不同的。

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

谢谢,

Answer 1

下面是一个演示如何根据浏览器innerHeight呈现行的fiddle。

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我已经计算了适合屏幕显示的行数。所以在底部会有一些空白处。