为何全设100%高度的页面出现滚动条？移除DOCTYPE为何能修复？

这事儿核心是浏览器的两种渲染模式差异：

• 当你写了<!DOCTYPE html>时，浏览器会触发标准模式（Standards Mode），严格按照W3C规范渲染页面；
• 删掉DOCTYPE后，浏览器会切换到怪异模式（Quirks Mode），用旧的、非标准的规则渲染，兼容早期网页。

你的问题出在标准模式下的两个细节：

1. canvas默认是内联替换元素，它会和文本基线对齐——哪怕页面里没有文本，浏览器也会给它留几像素的底部空隙（用来容纳字母的下伸部分，比如g、y）。这个空隙让body的实际高度超过了视口的100%，于是出现滚动条，露出下面html的绿色背景。
2. 标准模式下，height:100%的生效规则更严格：html和body的100%高度是相对于视口，但如果子元素（这里是canvas）因为基线空隙导致高度溢出，body不会自动裁剪，而是撑高自己。

而怪异模式下，浏览器会忽略这些严格的规范细节：canvas被当作块级元素处理，不会有基线空隙；同时元素高度的计算更宽松，100%高度会强制铺满视口，不会出现溢出。

正确的解决办法（别删DOCTYPE） #

没必要依赖怪异模式，给canvas加个display:block就能彻底解决问题：

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

这样canvas变成块级元素，基线空隙消失，页面就能完美铺满视口，没有滚动条。

内容的提问来源于stack exchange，提问作者user2741831