余分なスペースを作らずにキャンバスにdivをオーバーレイする方法

キャンバスの上に30％の上と下に30％の「A、スネア」と書かれたこのカードをオーバーレイしようとしていますが、キャンバス。私が意味することを示すために強調表示された「div.content」の画像を添付しました。どのようにして空白なしでこのカードをキャンバスの上に浮かせることができますか？余分なスペースを作らずにキャンバスにdivをオーバーレイする方法

Trailing white space.

#canvas{ 
 
    background:black; 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    z-index: -1; 
 
} 
 

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

 

 

 
.content{ 
 
    display:inline-block; 
 
    width:100%; 
 
    left: 30%; 
 
    top:30%; 
 
    right:-30%; 
 
    position:relative; 
 
} 
 

 
.card{ 
 
    background-color:green; 
 
    width:3%; 
 
    height 100%; 
 
    border: white solid 2px; 
 
}

<body> 
 
    <canvas id="canvas" resize hidpi=off></canvas> 
 
     <div class="content"> 
 
     <div class="card"> 
 
      <h1 class="card__title">A</h1> 
 
      <p class="card__description"> 
 
      Snare 
 
      </p> 
 
     </div> 
 
     </div> 
 
</body>

出典

2017-10-24 jpmllr

パーセントのベースキャンバスをする悪い考え。あなたは％が親に基づいていることを知っていますよね？ – PHPglue

現在100%からcontentセットの幅を持っています。つまり、このdivの幅は画面の100％です。 margin-leftは30％で、合計幅は130％です。 contentの幅を70％にして、問題が解決されます。その合計が100％になります。

編集：テキストを表示するには、cardを広げました。知っているだけです。

#canvas{ 
 
    background:black; 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    z-index: -1; 
 
    overflow: hidden; 
 
} 
 

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

 

 

 
.content{ 
 
    display:inline-block; 
 
    left: 30%; 
 
    top:30%; 
 
    width: 70%; 
 
    position:relative; 
 
} 
 

 
.card{ 
 
    background-color:green; 
 
    width:10%; 
 
    height 100%; 
 
    border: white solid 2px; 
 
}

<body> 
 
    <canvas id="canvas" resize hidpi=off></canvas> 
 
     <div class="content"> 
 
     <div class="card"> 
 
      <h1 class="card__title">A</h1> 
 
      <p class="card__description"> 
 
      Snare 
 
      </p> 
 
     </div> 
 
     </div> 
 
</body>

出典

2017-10-24 00:51:04

素晴らしいです、ありがとう！ – jpmllr

答えの隣にあるチェックマークを選択することを忘れないでください。質問が将来の読者に返答されるように表示されます（また、評判を回答者に報酬を与える）。 –

余分なスペースを作らずにキャンバスにdivをオーバーレイする方法

答えて

関連する問題