3

キャンバスがあり、テキストの下に表示したい。テキストとキャンバスの両方を含む親 div の高さは明示的に 200px です。次のように、テキスト div の下に残っている高さをキャンバスに埋めていきます。

----------------------------
|  label div               |
----------------------------
|                          |
|  canvas                  |  entire height of parent
|  fill in rest of height  |  div should be 200px.
|  (height = 100%)         |
|                          |
----------------------------

これは私が試したものです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <style type="text/css">
         html, body {
           margin: 0px;
           padding: 0px;
         }
         canvas {
           width:50px;
           height:100%;
         }
      </style>
   </head>
   <body>
      <div style="background-color: rgb(255, 200, 0); width:100%; height: 200px;">
         <div>hello</div>
         <canvas style="background-color: rgb(0,255,128);">
         </canvas>
      </div>
   </body>
</html>

ただし、canvas 要素が親 div の下部にあふれていることに注目してください。

ここに画像の説明を入力

キャンバスがこぼれることなく残りのスペースを埋める方法はありますか?

ありがとうございました

4

2 に答える 2

0

コンテナーの上の div のラベル クラスを作成し、それに高さの割合を指定して、キャンバスを残りの高さに設定できます。私はあなたのコードで例を作りました：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <style type="text/css">
         html, body {
           margin: 0px;
           padding: 0px;
         }
         canvas {
           width:50px;
           height:90%;
         }
         .label {
        height: 10%;
         }
      </style>
   </head>
   <body>
      <div style="background-color: rgb(255, 200, 0); width:100%; height: 200px;">
         <div class="label">hello</div>
         <canvas style="background-color: rgb(0,255,128);">
         </canvas>
      </div>
   </body>
</html>
于 2012-11-13T23:46:53.383 に答える
0

たぶん、次のようなことを試してください：

 ... 
 <div style="background-color: rgb(255, 200, 0); width:100%; height: 200px; overflow: hidden">
 ...

追加された css ルールの overflow:hidden に注意してください

CSS ルール オーバーフローの完全な使用法ドキュメントは次のとおりです http://www.w3.org/TR/CSS21/visufx.html

于 2012-11-14T01:58:13.990 に答える