如何让 Canvas 占用 100% 的剩余空间？答案

【问题标题】：How to make Canvas take 100% of remaining space?如何让 Canvas 占用 100% 的剩余空间？
【发布时间】：2013-06-18 18:51:27
【问题描述】：

类似于i want a div to take 100% height、100% 宽度或两者兼而有之。我想要一个Canvas 占用 100% 的宽度和 100% 的高度：

(Link to JsFiddle for your perusal)

标记：

<div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>

CSS：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
#canvasContainer {
    width: 100%;
    height: 100%;
    background-color: green;
}
#myCanvas {
    width: 100%;
    height: 100%;
}

Javascript：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();

这会导致某些东西占据浏览器窗口的 100%：

如果你删除Canvas，它会正常工作：

缺点是我没有Canvas。

【问题讨论】：

你想达到什么目的？
@Ani 100% 包含 div 的画布。最后，我们将把原生 CAD 应用程序转换为画布。第一步：创建一个与 "client docked" div 大小相同的画布。也许我不确定你在问什么：我希望整个画布立即在屏幕上可见 - 没有需要滚动条的溢出。

标签： css html canvas

【解决方案1】：

你可以用 0 来定位绝对值：

canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

然后只看它定位在哪个元素中，添加position: relative 来处理它覆盖的块。在您的情况下，可能是：#canvasContainer，但如果只是用于单个全屏，则可能是 body。

【讨论】：

【解决方案2】：

我过去也遇到过类似的问题。我的解决方案是在html 上设置overflow: hidden

Fiddle Here

它去掉了底部的那一点点，如果你检查页面，这只是一点点额外，而不是身体的高度。如果有人对那是什么有一些了解，我会全神贯注。

【讨论】：

这似乎只是在浏览器中隐藏了滚动条；当其他元素出现时，这开始成为问题。

【解决方案3】：

调整画布元素大小

如果你使用 CSS 拉伸画布，你会将默认大小为 300x150 像素的糟糕画布拉伸到整个屏幕 - 想象一下你有一个该大小的图像并且你做了同样的事情 - 看起来很糟糕。

Canvas 内容无法使用 CSS 进行拉伸（它以这种方式充当图像）。您需要明确设置画布的像素大小。

这意味着您需要获取父容器的大小并将其设置为画布上的像素值：

首先，摆脱滚动条等。调整您拥有的 CSS：

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

现在修改这条规则：

#myCanvas {
    background-color: green;
    position:fixed;
    left:0;
    top:0;
}

现在仅将标记减少到此（如果您希望画布覆盖整个屏幕，则不需要窗口以外的容器）：

<canvas id="myCanvas"></canvas>

现在我们可以计算尺寸了：

var canvas;

window.onload = window.onresize = function() {

    canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;   
}

就是这样。

Working demo（调整窗口大小以查看）。

【讨论】：

好东西。谢谢肯。用作魅力。

【解决方案4】：

修改了这里的一些示例以使我的工作。

JSFiddle：http://jsfiddle.net/FT3pP/1/

JS：

$( document ).ready( function () {
    SizeBackground();
} );

function SizeBackground(){
    var canvas = $( "canvas#background" )[0];

    fitToContainer( canvas );
}

function fitToContainer( canvas ) {
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;
}

CSS：

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

div .container {
  width: 100%;
  height: 100%; }
div#pallette {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px; }

canvas#background {
  position: fixed;
  left: 0;
  top: 0;
  background: black; }

HTML：

<body>
    <div id="pallette">
        <div class="container">
            <canvas id="background"></canvas>
            <canvas id="middleground"></canvas>
            <canvas id="foreground"></canvas>
        </div>
        <div id="stats"></div>
        <div id="chat"></div>
    </div>
</body>

只包括我拥有的：

<!-- Styles Sheets -->
<link href="Scripts/App.min.css" rel="stylesheet" />
<!-- Javascript -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/app.js"></script>

【讨论】：