4

新しいウィンドウで開くキャンバスを使用して画像ビューアを作成しています。キャンバスをウィンドウの幅、上下から 100px にしたいと思います。また、javascript を使用せずにサイズを変更したいと思います (javascript で再描画を処理させてください - キャンバスが上下の間隔でウィンドウの端に固定されたままになるようにしたいだけです)。私は次のことを試しましたが、右と下は無視されます:

.contextCanvas
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
}

ブラウザが右と下を喜んで無視する理由についての提案や理由はありますか?

4

1 に答える 1

7

私は答えを見つけました - 固定されたコンテナ div でキャンバスをラップし、内側のキャンバスを絶対位置と 100% の幅と高さに設定する必要がありました。

HTML

<div class="canvasContainer">
    <canvas class="contextCanvas"></canvas>
</div>

そしてここにCSSがあります

.canvasContainer
{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 100px;
    z-index: 1;
    background-color: Black;
}

.contextCanvas
{   position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
}
于 2012-09-13T23:32:05.590 に答える