html - HTML5 : make canvas height width in % work -


hi see below link http://liveweave.com/i6jyft

when assign canvas width 100% takes 100px width why ,

become

what make canvas match width of parent width , not find how solve , think bit tricky css issue

html code

<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 code below

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; } 

it looks adding 100px div 'canvas-container'. take parent element size.

please change

100px 100% 

it should be

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

Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -