Таблица не фитинга до 100% высоты

Edit: Обновление с кодом в ответТаблица не фитинга до 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% высоты

ответ

Смежные вопросы