css - 将画布设置为固定到窗口宽度并在没有javascript的情况下调整大小？

Question

我正在创建一个带有画布的图像查看器，该画布将在新窗口中打开。我希望画布是窗口的宽度，距离顶部和底部 100 像素。我还希望它在不使用 javascript 的情况下调整大小（让我处理 javascript 中的重绘 - 我只想看到画布保持固定在窗口边缘的顶部和底部间距。）我该怎么做？我尝试了以下但右侧和底部被忽略：

.contextCanvas
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
}

关于为什么浏览器会愉快地忽略右侧和底部的任何建议或推理？

Answer 1

我找到了答案——我必须将画布包装在一个固定位置的容器 div 中，然后将内部画布设置为绝对定位和 100% 的宽度和高度。

HTML

<div class="canvasContainer">
    <canvas class="contextCanvas"></canvas>
</div>

这是CSS

.canvasContainer
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
    z-index: 1;
    background-color: Black;
}

.contextCanvas
{   position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
}