html - css issue taking parent dimesion using % -


i had issue using height , width in % take size of parent window see below link : http://liveweave.com/gzp43q

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

html code

<script src="http://fabricjs.com/lib/fabric.js"></script>  <div class="wrap"> <table align="center" width="100%" border="1"> <tr valign="top"> <td width="10%"> left </td><td width="80%">             <div id="content">               <table border="1" width="100%">                 <tr><td style="border:1px solid red">                     <canvas id="canvas" width="100%" height="100%">                     </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 width="10%"> right </td></tr> </table> </div> 

css code :

.wrap{     margin: 0 auto;     width: 400px; } #content{     float:left;width: 100%; } #canvas{     width:100%;     height:100%;     overflow:hidden;     float:left;     border:1px solid #000000; } #canvas1{     width:320px;     height:256px;     overflow:hidden;     float:left;     border:1px solid #000000;     background-color: yellow; } 

when using % in css, related parent height / width. so, need add height of parent elements. content , wrap height, , width , height body , html.


Comments

Popular posts from this blog

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

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

delphi - Indy UDP Read Contents of Adata -