Question

编辑：使用回答中的代码进行了更新

我有一张桌子，我需要填充100％的高度并保持宽度与高度相同。我正在使用vh来尝试完成此任务。

的index.html：

＆＃13;

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;

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

然而，这需要超过100％的高度。我该如何解决这个问题？

Answer 1

您需要重置浏览器默认td padding值。我建议您使用CSS重置，例如normalize.css (link to HTML5Boilerplate)为您执行此操作：

/* Tables


/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

表不适合100％高度

1 个答案: