css - <div> 中的默认高度

我有两个这样的div标签:

<div class="cl1">
  <div class="cl2">
    <canvas id="testcanvas"/>
  </div>
</div>

div.cl1 在css中有宽高

width: 100%; 
height: 100%;

div.cl2 没有，我猜它会使用默认的宽度和高度。

但是当我用这个的时候

width: 100%; 
height: 100%;

在canvas#testcanvas中它的高度不是div.cl1的100%，而是30%左右；像这样

green is canvas#testcanvas and div.cl2
blue is div.cl1;

那么 div 标签如何计算默认高度。

还有当我删除了 <!DOCTYPE html> ，在 canvas#testcanvas 中它的高度是 100% div.cl1，我认为有不同的行为我不知道

最佳答案

HTML5 canvas 元素的宽度和高度应该明确设置，因为这定义了渲染上下文的区域。例如。 ...

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

... 例如，将为您提供整页 Canvas 。

CSS 宽度/高度只是一个显示属性，如果没有在 Canvas 上设置宽度/高度，它会解析为该设备/浏览器的默认大小。在移动设备上可能需要一些额外的调整大小方法来覆盖方向变化。

关于css - <div> 中的默认高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45770674/

相关文章：

css - 定位和调整大小的问题