HTML5：使画布高度宽度以 % 工作

Question

您好，请参阅下面的链接http://liveweave.com/I6JyFT

当我将画布宽度指定为 100% 时，它需要 100px 宽度，为什么会这样，

变得

如何使画布匹配父宽度的宽度，我找不到解决方法，觉得有点棘手的 css 问题

html代码

<table><tr valign="top"><td>
</td><td>
<table align="center">
<tr valign="top">
<td>
left
</td><td>
            <div id="content">
              <table border="1" width="100%">
                <tr  width="100%"><td style="border:1px solid red">
                    <canvas id="canvas" width="100%" height="100%" style="width: 100%; height: 100%; position: relative">
                    </canvas>
                <div id="canvas-drop-area"></div>
                </td></tr>
              <tr><td style="border:1px solid red">
                    <canvas id="canvas1" width="320" height="256">
                    </canvas>
                <div id="canvas-drop-area1"></div>  
                </td></tr>              
            </table>
            </div>
</td><td>
right
</td></tr>

</table>

下面的css代码

body{
    background-color:#FBFBFB;
    width:800px;
}
#wrapper{
    margin: 0 auto;
    width: 100%;
    border: 1px solid #999;
    padding: 5px;
    overflow: hidden;
}
#content{
    float:left;
}
#canvas{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}
#canvas1{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}

Answer 1

看起来你正在向这个 div 'canvas-container' 添加 100px。所以它会占用父元素的大小。

请更改

100px to 100%

应该是

<div class="canvas-container" style="width: 100%; height: 100%; position: relative;"></div