表不适合100%的高度

Table not fitting to 100% height

本文关键字：高度 100% 不适合      更新时间：2023-09-26

编辑:用答案中的代码更新

我有一个表格，我需要填充100%的高度，并保持宽度相同的高度。我正在使用vh来尝试完成此操作。

index . html: 

var board = document.getElementById('board');
var draw = '';
var letters = 'abcdefgh';
var init = '♖♘♗♕♔♗♘♖♙♙♙♙♙♙♙♙                                ♟♟♟♟♟♟♟♟♜♞♝♛♚♝♞♜';
for (var column = 8; column > 0; column--) {
  draw += '<tr id="' + column + '" class="row">';
  for (var row = 0; row < 8; row++) {
    draw += '<td id="' + letters.charAt(row) + column + '" class="tile">' + init.charAt(row + 8 * column - 8) + '</td>';
  }
  draw += '</tr>';
}
board.innerHTML = draw;
html,
body, td, th {
  margin: 0;
  padding: 0;
}
#board-wrapper,
#board {
  border-spacing: 0;
  float: left;
  height: 100vh;
  width: 100vh;
}
.tile {
  background-color: #fff;
  font-size: 6vh;
  height: 12.5vh;
  width: 12.5vh;
  text-align: center;
}
.row:nth-child(even) .tile:nth-child(odd),
.row:nth-child(odd) .tile:nth-child(even) {
  background-color: #777;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>TitaniumChess</title>
  <meta charset="UTF-8">
  <link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
  <table id="board-wrapper">
    <tbody id="board"></tbody>
  </table>
  <script src="main.js">
  </script>
</body>
</html>

然而，这占用了超过100%的高度。我该如何解决这个问题?

需要重置浏览器默认的td padding值。我建议你使用CSS重置，如normalize.css(链接到HTML5Boilerplate)，它会为你做:

/* Tables

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
相关文章：