Question

我正在尝试使用100％宽度，高度的画布元素来绘制，但是我正在尝试捕捉22，因为Chrome和Firefox都会创建滚动条。滚动条似乎在那里，因为另一个相应的滚动条使内容更宽/更高。也就是说，垂直滚动条就在那里，因为画布的底部被水平滚动条覆盖，水平滚动条就在那里，因为画布的右侧被垂直滚动条覆盖。任何帮助表示赞赏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
            * { margin: 0; padding: 0; }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                var canvas = $("canvas").get(0);
                canvas.width = $(document).width();
                canvas.height = $(document).height();
                var c = canvas.getContext("2d");
                c.fillStyle = "rgb(200,0,0)";
                c.fillRect(0,0,5000,50);
                c.fillStyle = "rgba(0,0,200,0.5)";
                c.fillRect(0,0,50,5000);
            });
        </script>
    </head>
    <body>
        <canvas></canvas>
    </body>
</html>

Answer 1

您是否从<body>删除了填充/边距？默认情况下，它带有一些填充和边距，所以即使你的内容应该“完美”，也会有滚动条，因为填充和边距会推动它的大小。

Answer 2

你可能被body元素的边框或边距击中了 - 你要求document.width / height（有效）但是把它放在带边框的元素中，所以页面的总宽度（canvas.width +（左/右边框））然后大于您最初要求的宽度/高度。

Answer 3

我担心画布元素确实是问题的根源：

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
html {
    height: 100%;
}

body{
    margin:0;
    height: 100%;
}
</style>
<body>

<!--
This does fit
<div style="width: 100%;height: 100%;background-color: gray" ></div>
-->

<!-- This doesn't -->
<canvas style="width: 100%;height: 100%;background-color: gray;" >

</body>
</html>

如果你运行它，你会看到一个滚动条。当您使div显示为可见（具有相同的尺寸）时，不会出现滚动条。

我不知道为什么会发生这种情况（它发生在Firefox和Chrome上，但也发生在IE9和Opera上），但你可以通过使用Transitional DOCTYPE解决这个问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或者你可以通过画布显示来修复它：block;

写这篇文章的时候，我发现this blog基本上都是这样说的。

Answer 4

这对我来说（html5 doctype和normalize.css）

#container {
  line-height: 0px;
  overflow: hidden;
}

Answer 5

万一有人遇到同样的问题，想要保持怪癖模式，只需在css中添加以下内容：

* { margin: 0; padding: 0; overflow: hidden; }

Answer 6

我有类似的问题，有人（Dmitry Nevzorov）解决了这个问题。尝试添加这一点CSS：

canvas {
    box-sizing: border-box;
}

Answer 7

<style>
    * {
        box-sizing: border-box;
    }

    html {
        width: 100vw;
        height: 100vh;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
    }
    canvas {
        /* border: 1px solid black; */
        background-color: red;
    }
</style>

你的 CSS 应该是这样的

最大宽度/高度画布滚动条干扰？

7 个答案: