Question

是否有一个简单的CSS解决方案来使HTML5画布填充页眉和页脚之间的整个空间？

页眉和页脚的高度已知且已修复，所有元素都应具有100％的宽度。这里的关键点是标记和样式的简单性，以及避免包装div。

这是我的标记：

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

虽然页眉和页脚之间的全高div的问题似乎更容易解决，并且已经有一些非常好的答案，我无法找到一种方法来获得相同的画布。 / p>

小提琴：http://jsfiddle.net/h7smdykf/

Answer 1

你的意思是这样吗？

编辑：Jep，他们是对的，拉伸画布使你的元素掠过。我对“对象适合”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>

如何使用标题和放大器将画布拉伸到页面全高度页脚？

1 个答案: