表不適合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％身高

回答

相關問題