使用 % 获取父维度的 css 问题

Posted 2023-03-06

【中文标题】使用 % 获取父维度的 css 问题

【英文标题】：css issue taking parent dimesion using %

【发布时间】：2014-11-27 12:13:46

【问题描述】：

我在使用 % 中的高度和宽度来获取父窗口的大小时遇到​​问题 见以下链接：http://liveweave.com/GZP43q

我错过了什么，如何让它发挥作用 如何使画布匹配父宽度的宽度，我找不到如何解决它，认为有点棘手的 css 问题

html 代码

<script src="http://fabricjs.com/lib/fabric.js"></script>

<div class="wrap">
<table align="center"  border="1">
<tr valign="top">
<td >
left
</td><td >
            <div id="content">
              <table border="1" >
                <tr><td style="border:1px solid red">
                    <canvas id="canvas"  >
                    </canvas>
                <div id="canvas-drop-area"></div>
                </td></tr>
              <tr><td style="border:1px solid red">
                    <canvas id="canvas1"  >
                    </canvas>
                <div id="canvas-drop-area1"></div>  
                </td></tr>              
            </table>
            </div>
</td><td >
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;

【参考方案1】：

当您在 CSS 中使用 % 时，它始终与父级高度/宽度相关。因此，您需要为所有父元素添加高度。对于content 和wrap 和height，以及width 和height 到body 和html。

【讨论】：

我已经添加了 width ，但它仍然无法正常工作，请更新代码以提供解决方案