Question

类似于i want a div to take 100% height，100％宽度或两者兼而有之。我希望Canvas采用100％宽度和100％高度：

标记：

<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％：

enter image description here

如果删除Canvas：

，它可以正常工作

enter image description here

此后的缺点是我没有Canvas。

Answer 1

调整画布元素的大小

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

使用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 （调整窗口大小以查看）。

Answer 2

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

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

然后只需查看它所定位的元素，添加position: relative来处理它所覆盖的块。在您的情况下可能是：#canvasContainer，但如果只是一个完整的屏幕，则可能为body。

Answer 3

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

上设置html

Fiddle Here

它在底部摆脱了一点点，如果你检查页面只是一点点额外的，而不是身体的高度。如果有人对这是什么有所了解我就是全部的耳朵。

Answer 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>

如何让Canvas占用100％的剩余空间？

4 个答案:

调整画布元素的大小