Html 为什么这个高度为100%的页面会出现滚动条

发布于02月24日

此代码只是一个嵌套的html、Body和Canvas标记，应该在没有滚动条的页面上刷新:

<!DOCTYPE html>
<html lang="de" style="width:100%;height:100%;padding:0px;margin:0px;background-color:#0f0">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script type="text/javascript">
  </script>
</head>

<body style="width:100%;height:100%;padding:0px;margin:0px;background-color:#f00">


  <canvas id="canvas" style="width:100%;height:100%;padding:0px;margin:0;background-color:#00f"></canvas>
</body>

</html>

但相反，它将显示一个滚动条，底部有一个微小的绿色(这是html标签.我发现这种行为可以通过删除DOCTYPE标记来修复.为什么会这样？

推荐答案

之所以会发生这种情况，是因为<canvas>元素被视为inline元素，类似于<img>标记，因为它充当图形元素.您只需将其display属性更改为block

html,
body,
canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  background-color: #0f0
}

body {
  background-color: #f00;
}

canvas {
  background-color: #00f;
  display: block;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script type="text/javascript">
  </script>
</head>

<body>


  <canvas id="canvas"></canvas>
</body>

</html>