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

Question

我正在创建一个带有画布的图像查看器,它将在新窗口中弹出.我希望画布是窗口的宽度,从顶部和底部100px.我也希望它不使用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;
}