設定し、それを含むdivの

Question

の高さと幅のキャンバスの高さと幅、私は次のコードを持っているし、クラスcanvas-wrapと私のdivとキャンバスと同じサイズしたいと思います：

#overlay { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.canvas-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="canvas-wrap"> 
 
    <div class="row" id="overlay"> 
 
    </div> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

現時点では150x300にデフォルト設定されているようです。 canvas-wrapのクラスのdivと同じサイズの方が良いでしょう。

誰かが私が間違っていることを説明してエラーを修正することはできますか？

Answer 1

キャンバス自体にスタイル定義を設定していません。私suggetionについては

#overlay { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    bottom: 0; 
 
} 
 

 
.canvas-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
.canvas-wrap canvas { 
 
    border: 1px solid magenta; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    
 
} 
 

 
body, .canvas-wrap { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="canvas-wrap"> 
 
    <div clas="row" id="overlay"> 
 
    </div> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

Answer 2

あなたはCSSでdiv要素の高さと幅を言及してもキャンバスに同じ幅と高さを言及する必要があります。例えば、私のsuggetionについては

.canvas-wrap { 
 
    width: 100%; 
 
    border: 3px solid #000; 
 
    height: 200px 
 
} 
 

 
.canvas-wrap canvas { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    height: 200px; 
 
}

<div class="canvas-wrap"> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

のためにあなたは、CSSでdiv要素の高さと幅を言及してもキャンバスに同じ幅と高さを言及する必要があります。例えば

.canvasラップ{幅：100％;高さ：100pxに;}にのみキャンバス_scale_ CSSを介して、幅と高さを指定