将画布设置为窗口宽度并在不使用javascript的情况下调整大小?

I am creating an image viewer with a canvas which will pop open in a new window. I would like the canvas to be the width of the window and 100px from the top and bottom. I would also like for it to resize without using javascript (let me handle the redrawing in javascript - I just want to see the canvas stay fixed to the edges of the window with the top and bottom spacing.) How can I do this? I tried the following but the right and bottom are ignored:

我正在创建一个图像查看器，它将在一个新窗口中弹出。我希望画布是窗口的宽度，从上到下是100px。我也希望它不用javascript来调整大小(让我用javascript来处理重绘——我只想看到画布固定在窗口的边缘，顶部和底部的间隔)。我该怎么做呢?我尝试了下面的方法，但却忽略了正确和底部:

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

Any suggestions or reasoning as to why the browser will happily ignore the right and bottom?

有什么建议或理由可以解释为什么浏览器会愉快地忽略正确和底部吗?

1 个解决方案

#1

I found the answer - I had to wrap the canvas in a container div which was fixed positioned and then set the inner canvas to absolute positioning and 100% width & height.

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

HTML

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

And here's the CSS

这是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;
}

#1