Question

我有一个画布，我想在一段文字下展示它。包含文本和画布的父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的底部：

enter image description here

有没有办法让画布填充剩余空间而不会溢出？

谢谢

Answer 1

您可以为容器上方的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>

Answer 2

也许尝试这样的事情：

 ... 
 <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

获取<canvas>元素以填充父div中的剩余高度？</canvas>

2 个答案: