Question

我正在尝试将表格中的行设置为页面高度的20％。

当前index.html看起来像这样：

div#machines {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%;
  width: 80%;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

td {
  width: 20%;
  height: 100%;
}

tr {
  width: 100%;
  height: 20%;
}

table {
  width: 100%;
  height: 100%;
}

<body>
  <div id="machines">
    <table>
      <tr>
        <td id="stone">0</td>
        <td id="copper">0</td>
        <td id="iron">0</td>
        <td id="coal">0</td>
      </tr>
      <!-- ... (trs continue but truncated for length of code) -->
    </table>
  </div>
</body>

因此，（至少据我所知）一张表占用了100％的div机器，然后在该表中创建了一行，该行的宽度为宽度的100％，高度为高度的20％（但错误地，该行变成了然后，td应该是行的宽度的20％，行的高度的100％。

如何解决此问题，使tr仅为页面高度的20％？谢谢。

Answer 1

您可以使用视口单位（浏览器窗口大小）。屏幕的高度为100vh，屏幕的宽度为100vw。

如果表格较高，则可以使用min-height属性并将其设置为100vh。

如果我理解了这个问题，我认为这个CSS可以满足您的需求：

td {width: 20vw;}
tr {height: 20vh;}
table {width: 100%; min-height: 100vh;}

希望有帮助。

在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

这是tr和td的样式之间的冲突。尝试各取一个，看看有什么不同。由于td内嵌在tr中，因此无法设置两者的高度。希望这会有所帮助。

CSS元素高度不正确

2 个答案: