Question

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

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

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

Answer 1

我找到了答案 - 我必须将画布包裹在固定位置的容器div中，然后将内部画布设置为绝对定位和100％宽度＆amp;高度。

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

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

1 个答案: