画布忽略父大小答案

【问题标题】：Canvas ignoring parent size画布忽略父大小
【发布时间】：2016-10-03 08:06:57
【问题描述】：

我有一个在容器内显示 HTML 画布元素的页面。由于画布中显示的图像可能比我拥有的空间大得多，我强制容器的大小并使用它的溢出属性来滚动画布的内容。虽然容器和滚动条都正确显示，但画布会忽略它。

我的 HTML：

<div class="sidebar">
   Some content
</div>
<div class="the_wrapper">
    <div class="canvas_wrapper">
       <canvas id="imageCanvas"></canvas>
    </div>
    <div class="another_element">
         Some other content
   </div>
</div>

这是 CSS：

 .sidebar{
    height: 100vh;
    width: 20vw;
    float: left;
 }

.the_wrapper{
    height: 100vh;
    width: 80vw;
    float: right;
}

.canvas_wrapper{
    height: 60vh;
    overflow: scroll;
}

.another_element{
    height: 40vh;
}

这就是我想要的

但我得到的只是这个

【问题讨论】：

.canvas_wrapper 和 .canvasWrapper. 不匹配。
它可以在我的 chrome 上随心所欲地工作。可能是其他导致问题的原因。你能为此分享小提琴吗？
jsfiddle.net/tbhc2em4 是这样的吗？似乎可以在 firefox 和 chrome 中使用，只需更改 with 以满足您的需求...（不作为答案发布，因为我不确定您是否要使用百分比）
jsfiddle.net/MadanBhandari/un4L5tfz 工作正常，你可以在这里查看
在什么浏览器中？在firefox作品中

标签： css html canvas

【解决方案1】：

.the_wrapper 不需要将浮点数设置为右。

 .the_wrapper{
    height: 100vh;
    width: 80vw;
    float: right; // Don't do that
}

就这样做

.the_wrapper {
    position: absolute;
    right: 0;
    height: 100vh;
    width: 80vw;
}

我还重置了一些属性以获得您的第一个示例的结果。

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

这里是 sn-p 结果：

 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

.sidebar {
    height: 100vh;
    width: 20vw;
    float: left;
    border: 3px solid #000;
 }

.the_wrapper {
    position: absolute;
    right: 0;
    height: 100vh;
    width: 80vw;
}

.canvas_wrapper {
    height: 60vh;
    border: 3px solid green;
}

.another_element {
    height: 40vh;
    border: 3px solid red;
}

<div class="sidebar">Some content</div>
<div class="the_wrapper">
    <div class="canvas_wrapper">Canvas
       <canvas id="imageCanvas"></canvas>
    </div>
    <div class="another_element">Some other content</div>
</div>

你也可以在https://jsfiddle.net/lofeed/6n983g7x/4/试试看

【讨论】：

【解决方案2】：

包装器设置为向右浮动，这意味着所有可用空间都将包含在其中。

【讨论】：