6

フロントエンドの背後に独自の Web 管理者を開発しました。これは典型的な Admin で、左側にメニュー ナビゲーションが 1 つ、右側に本文コンテンツがあり、クリックされたメニュー項目に関連する結果 (通常はテーブル) が表示されます。

本文ページを 100% に収めるためにテーブル内の正しい数または行を取得する最善の方法は何ですか?

私の場合、画面の解像度を変更すると、テーブルのスペースを埋めるために必要なトウの数が異なることがわかりました。

簡単な解決策は、解像度を計算し、画面の解像度を知った後にテーブルにデータを入力することです。画面の解像度などに基づいて、実行時に TD または TR の高さを設定できるかどうか疑問に思っていました。

ありがとう、

4

1 に答える 1

3

これは、ブラウザーの 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画面に収まる行数を減らしました。そのため、下部に空きスペースができます。

于 2012-08-20T12:32:54.097 に答える