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

【问题标题】：Set a canvas to be fixed to the window width and resize without javascript?将画布设置为固定到窗口宽度并在没有javascript的情况下调整大小？
【发布时间】：2012-09-14 09:19:46
【问题描述】：

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

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

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

【问题讨论】：

标签： css html canvas css-position

【解决方案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;
}

【讨论】：