3

我有一个画布，我想在一段文字下显示它。包含文本和画布的父 div 的显式高度为 200 像素。我希望画布只填充文本 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 的底部：

在此处输入图像描述

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

谢谢

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 规则溢出：隐藏

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

于 2012-11-14T01:58:13.990 回答