画布忽略父级大小

Question

我有一个页面，在容器内显示HTML canvas元素。由于画布中显示的图像可能远大于我所拥有的空间，因此我强制容器的大小并使用其overflow属性来滚动画布的缓冲区。虽然容器和滚动条都正确显示，但画布只是忽略它。

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

这就是我想要的

但我得到的只是这个

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

这是摘要结果：

 * {
   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/

中尝试

Answer 2

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