5
Chỉnh sửa: Đã cập nhật với mã trong câu trả lờiBảng không phù hợp với chiều cao 100%
Tôi có một bảng mà tôi cần phải lấp đầy 100% chiều cao và giữ chiều rộng giống như chiều cao. Tôi đang sử dụng vh để thử và thực hiện việc này.
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>Tuy nhiên, điều này chiếm chiều cao hơn 100%. Làm thế nào tôi nên sửa lỗi này?
Đây là một điểm trên câu trả lời, nhưng cũng có thể hữu ích khi thêm vào đó là câu trả lời vì [chiều cao được tính bên trong phần đệm] (https://developer.mozilla.org/en-US/docs/Web/CSS/height). Và mã gốc đã thiết lập mỗi ô bảng thành 1/8 chiều cao của cửa sổ, và sau đó phần đệm được thêm vào. – Hopeless
Điều này làm cho bảng quá nhỏ bây giờ. Tôi đã cập nhật ví dụ trực tiếp để bạn có thể thấy sự cố. –
@Không có phần đệm được thêm từ đầu bởi vì phần tử 'td' kế thừa giá trị đệm trình duyệt mặc định. Nếu OP không muốn thiết lập lại nó, sau đó anh ta có thể sử dụng thuộc tính 'box-sizing: border-box', nó sẽ bao gồm giá trị padding cho chiều cao. – Vucko