使子元素的高度/宽度完全匹配父元素

Question

我有一个场景，我有一个灰色的正方形，我想被橙色的正方形完全覆盖。

我将它们各自的高度/宽度设置为完全相同，但是浏览器渲染了橙色框，因此它们有点高 （1px）和有点太窄（1px）。 不幸的是，我不能仅仅用calc(19vh - 1px)来解决这个问题，因为它取决于视口的大小。 这个多余的像素来自哪里？

我做了一个简化的示例，并将其发布在这里： http : //jsfiddle.net/165jnswd/

编辑：这里可以找到一个更简化的示例： http : //jsfiddle.net/165jnswd/2/

Answer 1

这是从表格的边框开始的。 如果将其设置为0 ，则表\\ tbody \\ tr \\ td的高度相同。

 table { table-layout: fixed; margin: 9vh auto 0; /*border-spacing: 0.6vh; -- change this -- */ border-spacing: 0; border-collapse: separate; } td.cell { position: relative; text-align: center; border: 1vh solid #999; border-radius: 1vh; background-color: #fff; color: #999; box-sizing: border-box; transition: background-color 0.25s ease; } .sz3x3 { width: 19vh; height: 19vh; } .sz4x4 { width: 14vh; height: 14vh; } td.black { background-color:#999; color:#fff; } td.white { background-color: #fff; color: #999; } td.par { background-color: #ffdfbd; } td.par.selected { background-color: #fdc07d; } td.selected { background-color: #eee; } .number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 7.5vh; } #selector { top: -1vh; left: -0.9vh; border: 1vh solid #ef8d22; border-radius: 1vh; position: absolute; box-sizing: border-box; z-index: 999999; } 

 <div id="game-content"> <div id="game-screen"></div> <div id="board-container"> <table> <tr> <td class="cell sz3x3" data-x="0" data-y="1"> <div class="number"></div> <div id="selector" class="sz3x3"></div> </td> <td class="cell sz3x3" data-x="1" data-y="1"> <div class="number"></div> <div id="selector" class="sz3x3"></div> </td> <td class="cell sz3x3" data-x="2" data-y="1"> <div class="number"></div> <div id="selector" class="sz3x3"></div> </td> </tr> </table> </div> </div>