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

我有一个画布，我想在一段文字下显示它。包含文本和画布的父div具有200px的显式高度。我想在画布上只填写自己喜欢的高度遗留下来的文字格的下方，是这样的：获取<canvas>元素以填充父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>

但是请注意如何在画布元素泄漏父DIV的底部：

enter image description here

有没有办法只得到画布，以填补剩余的空间，而不溢出？

谢谢

来源

2012-11-13 user291701

你可以让一个标签类的容器上方的股利，并给它一个高度％，而画布设置为剩余的高度。我做了一个例子与您的代码：

<!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-13 23:46:53 Eli

嗯，这是有道理的 - 但如果我不知道标签div的高度大致是什么？假设我需要添加未知数量的子div，是否无法让它增长到需要的任何高度，并且只需要使用canvas元素填充剩余的空间？谢谢 – user291701

您可以使用JavaScript。看看JQuery。您可以使用.css（）方法获取父div的高度，减去子节点的高度，然后使用它来设置画布的高度。这是更多的工作，但非常灵活。 [JQuery .css（）页面]（http://api.jquery.com/css/） – Eli

也许尝试这样的事：

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

注意添加CSS规则溢出：隐藏

下面是完整的使用文档css规则溢出 http://www.w3.org/TR/CSS21/visufx.html

来源

2012-11-14 01:58:13 dRoneBrain

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

回答

相关问题