Question

I am creating an image viewer with a canvas which will pop open in a new window. I would like the canvas to be the width of the window and 100px from the top and bottom. I would also like for it to resize without using javascript (let me handle the redrawing in javascript – I just want to see the canvas stay fixed to the edges of the window with the top and bottom spacing.) How can I do this? I tried the following but the right and bottom are ignored:

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

Any suggestions or reasoning as to why the browser will happily ignore the right and bottom?

Answer 1

I found the answer – I had to wrap the canvas in a container div which was fixed positioned and then set the inner canvas to absolute positioning and 100% width & height.

HTML

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

And here’s the 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;
}