畫布忽略父級大小

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

包裝器設置為向右浮動，這意味着所有可用空間都將包含在其中。