css - 如何将 Canvas 拉伸(stretch)到带有页眉和页脚的页面全高？

Question

是否有一个简单的纯 CSS 解决方案来制作 HTML5 Canvas 来填充页眉和页脚之间的整个空间？

页眉和页脚的高度已知且固定，所有元素的宽度应为 100%。这里的关键点是标记和样式的简单性，并避免包装 div。

这是我的标记:

<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer"><p>footer</p></div>

虽然页眉和页脚之间的全高 div 问题似乎更容易解决，并且已经有一些非常好的答案，但我无法想出一种方法来使用 Canvas 。

fiddle :http://jsfiddle.net/h7smdykf/

Answer 1

你是说这样吗？

编辑:杰普，他们是对的，拉伸(stretch) Canvas 会扭曲你的元素。我对“object-fit”有了更进一步的了解 https://www.w3.org/TR/css3-images/#the-object-fit

https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element 建议使用“object-fit”

Edit2: 垂直对齐仍有问题。圆圈应位于页面中间。

z-Index 解决了这个问题。

var c=document.getElementById("content");
var ctx=c.getContext("2d");
var x = c.width / 2;
var y = c.height / 2
ctx.beginPath();
ctx.arc(x,y,50,0,2*Math.PI);
ctx.stroke();

html, body {
    margin: 0;
    padding: 0;
}
.header, .footer {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    background: lightgreen;
    z-index: 1;
}
.footer {
    bottom: 0px;
}
.content {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    background: lightblue;
    z-index: 0;
    margin: 48 0 48 0;
}

<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer">footer</div>