我在使用 % 的高度和宽度来获取父窗口的大小时遇到了问题 请参阅以下链接:http://liveweave.com/GZP43q
我错过了什么,该怎么做才能让它发挥作用 如何使 Canvas 匹配父宽度的宽度,我找不到解决方法,认为有点棘手的 css 问题
HTML代码
<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 代码:
.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;
}
最佳答案
当您在 css 中使用 %
时,它总是与父级高度/宽度相关。因此,您需要添加所有父元素的高度。 content
和 wrap
为 height
,width
和 height
为 正文
和html
。
关于html - 使用 % 获取父维度的 css 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27170558/