0

親ウィンドウのサイズを取得するために高さと幅を％で使用することに問題がありました。以下のリンクを参照してください：http://liveweave.com/GZP43q

私は何が欠けているのですか、キャンバスを親の幅の幅と一致させるために何をすべきか、私はそれを解決する方法を見つけることができませんでした、少しトリッキーな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;
}
4

1 に答える 1

0

CSSで使用%している場合、常に親の高さ/幅に関連しています。したがって、すべての親要素に高さを追加する必要があります。contentとwrap、heightおよびwidthとheightと。_ body_html

于 2014-11-27T12:16:39.387 に答える