html - 根据窗口大小绘制游戏板/ table 大小

Question

我有一个关于根据正在使用的窗口或浏览器的大小调整/绘制游戏板的问题。我正在使用 html/css/js 编码游戏黑白棋。将附上我想要实现的图像。游戏板本身的高度与其右侧显示的信息相同。我希望它是例如窗口高度的 70%，这样我仍然有剩余的 30% 来制作边框等。在 HTML 中，我定义了一个带有 'board-table' id 的表，然后我尝试制作一个变量'size' 决定这张 table 的高度。在 CSS 中，我指定高度应为 70%，以便之后可以绘制游戏板。但是，当我以不同的尺寸重新加载页面时，它总是有一个前缀大小，因此我想知道如何修复它。下面显示了我的一部分代码。

HTML:

<table id="board-table"></table>

CSS:

#board-table {
  height: 70%;
}

Javascript:

function draw() {
  var size = $('#board-table').height();
  var square = (1/8) * size;
  var half = (1/2) * square;
  for (var y = 0; y < 8; y++) {
    for (var x = 0; x < 8; x++) {
      var canvas = $("#canv_" + x + "" + y)[0]
      var ctx = canvas.getContext("2d")
      if (game.board[x][y] == 1) {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
        ctx.beginPath()
        ctx.fillStyle = "white"
        ctx.arc(half, half, half, 0, 2 * Math.PI)
        ctx.fill()
      } else if (game.board[x][y] == 2) {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
        ctx.beginPath()
        ctx.fillStyle = "black"
        ctx.arc(half, half, half, 0, 2 * Math.PI)
        ctx.fill()
      } else {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
      }
    }
  }
}

function generateBoard() {
  for (var y = 0; y < 8; y++) {
    $("#board-table").append("<tr id=row" + y + "" + "><tr")
    for (var x = 0; x < 8; x++) {
      $("#row" + y).append("<td id=cell_" + x + "" + y + "></td>")
      $("#cell_" + x + "" + y).append("<canvas height=100% onclick=handleclick(" + x + "," + y + ") onmouseover=handlehover(" + x + "," + y + ") width =100% id=canv_" + x + "" + y + "></canvas>")
    }
  }
}

Example of what I am trying to achieve.

Answer 1

在 css 中，当您使用 height: 70%; 时，这是指包含元素的 70%。

这可以通过使用 height: 70vh;

绕过

详细介绍 here