表不适合100％身高

我有一张桌子，我需要填充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％的高度。我应该如何解决这个问题？

来源

2016-08-09 Julian Lachniet

您需要重置浏览器的默认值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; 
}

来源

2016-08-09 20:09:40 Vucko

这是答案的斑点，但它也可能是有用的，在加上其原因，这是因为答案[高度是在填充内计算]（https://developer.mozilla.org/en-US/docs/Web/CSS/height）。原始代码将每个表单元格设置为窗口高度的1/8，然后添加填充。 – Hopeless

这使得桌子太小了。我更新了现场示例，以便您可以看到问题。 –

@Hopeless从开始就添加了填充，因为'td'元素继承了默认的浏览器填充值。如果OP不想重置它，他可以使用box-sizing：border-box属性，它将填充值填充到高度。 – Vucko

表不适合100％身高

回答

相关问题