How to fill the table with the correct number of rows to fit the page height in different screen resolution ?

Question

I developed my own Web-Admin behind the front-end. It's a typical Admin with container , one menu-navigation in the left and a body content in the right which shows the result (typically a table) related to the clicked menu item.

What is the best way to get the correct number or rows in the table in order to fit the the body page at 100% ?

In my case, i have seen that the number of tow required to fill the space in the table is different while changing the screen resolution.

I know a quick solution could be to calculate the resolution and get the table populated after knowing the screen resolution. I was wondering if if possible to set the TD or TR height at runtime, based on the screen resolution or somehow else.

Thanks,

Answer 1

Here is a fiddle that demonstrates the rendering of rows depending on the browser 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 I've set the height of the cell in CSS, this can be done differently
PS. 2 I've floored the number of rows that fit on the screen. So there will be some empty space at the bottom.