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
Post a Comment