画布 - 高度调整自己 - Sketch.js

Question

我正在使用sketch.js为移动应用程序创建一个简单的草图板。它只是通过将宽度和高度设置为100％来填满整个屏幕，但是在我点击“草图板”之后它会将自身调整为更小的尺寸。在这种情况下，如何将画布设置为全屏？这是我的例子http://jsfiddle.net/66UJ9/

<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>

Answer 1

CSS的height属性不会将高度称为窗口的百分比，这正是您所期望的。 MDN声明：

  

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则值计算为auto

您的小提琴中没有包含块，并且它没有绝对定位，因此它默认为auto。但您可以使用JS将<canvas>的高度设置为浏览器窗口，如下所示：

// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());

根据实际页面的外观，您可能需要稍微调整一下。 （JSFiddle正在添加一些填充它的填充。）