Question

我有一个很好的HTML布局，左栏，右栏和中心区域。左侧栏有文本的顶部和底部标签，以及（当取消注释时）垂直中央画布。当浏览器窗口大小发生变化时，布局确实可以很好地调整自身大小。

当我取消注释画布并尝试使用JavaScript处理调整大小消息使其适合父大小时，它会以某种方式阻止布局根据窗口范围调整自身大小。相反，窗口获得一个垂直滚动条，布局不再是“100％”，而是大于视口大小。

有问题的代码看起来像这样：

<tr style="height: 80%;">
    <td align="center" id="controlparent" bgcolor="#E6E6FA">
        <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
    </td>
</tr>

我犯了什么错误？

（请注意我现在正在使用HTML表格进行布局 - 我已经尝试使用CSS进行布局，这对于初学者来说太难了。）

Here's my fiddle

Answer 1

Canvas width和height属性（和属性）总是以不带任何单位的像素形式给出。

如果您不想使用CSS，在这种情况下您将使用元素内的style="width:100%;height:100%"属性，则需要使用JavaScript计算父级的宽度/高度。

使用JavaScript计算父级大小：

＆＃13;

var ctrl = document.getElementById("control"),
    parentSize = ctrl.parentNode.getBoundingClientRect();

ctrl.width  = parentSize.width;
ctrl.height = parentSize.height;

＆＃13;

html, body {width:100%; height:100%; margin:0}

＆＃13;

<tr style="height: 80%;">
  <td align="center" id="controlparent" bgcolor="#E6E6FA">
    <canvas id="control" width="100%" height="100%" class="slider" style="background-color:blue"></canvas>
  </td>
</tr>

＆＃13;

画布与父级相同

1 个答案: