2

Is there a simple CSS-only solution to make a HTML5 canvas to fill the entire space between a header and a footer?

The height of header and footer is known and fixed, all elements should have 100% width. Key point here is the simplicity of markup and style, and to avoid wrapper divs.

This is my markup:

<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer"><p>footer</p></div>

While the problem of a full-height div between header and footer seems to be a lot easier to solve, and there are on SO already some very fine answers, i cannot figure a way to get the same with a canvas.

Fiddle: http://jsfiddle.net/h7smdykf/

deblocker
  • 7,629
  • 2
  • 24
  • 59
  • I guess you are gonna do some drawings on this canvas, and you probably don't want your circles to become ellipses, or to have some ugly antialiasing artifacts all around, then, don't use css to resize your canvas or at least **don't forget to set its own `.width`& `.height` properties**. – Kaiido May 31 '16 at 09:12
  • @Kaiido, just for the sake of completiness, for the "ellipses" i would rather go with var aspect = canvas.clientWidth / canvas.clientHeight; as suggested in webglfundamentals – deblocker May 31 '16 at 10:02

1 Answers1

5

Do you mean like this?

Edit: Jep, they are right, streching the canvas skrews up your elements. I got a little further with "object-fit" https://www.w3.org/TR/css3-images/#the-object-fit

Using "object-fit" is suggested from https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element

Edit2: There is still a problem with the vertical alignment. The Circle should be in the middle of the page.

z-Index solves the problem.

var c=document.getElementById("content");
var ctx=c.getContext("2d");
var x = c.width / 2;
var y = c.height / 2
ctx.beginPath();
ctx.arc(x,y,50,0,2*Math.PI);
ctx.stroke();
html, body {
    margin: 0;
    padding: 0;
}
.header, .footer {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    background: lightgreen;
    z-index: 1;
}
.footer {
    bottom: 0px;
}
.content {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    background: lightblue;
    z-index: 0;
    margin: 48 0 48 0;
}
<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer">footer</div>
K. Tippenhauer
  • 326
  • 2
  • 7
  • 1
    Some more [details](http://stackoverflow.com/a/30487045/1693593) on object-fit. Just note that the actual bitmap *size* is not changed. You can use `getBoundingClientRect()` to read the pixel size and set the canvas element to those value after resizing (and of course a redraw would be necessary). –  May 31 '16 at 10:41
  • i agree with K3N, also due to the poor support of `object-fit` doing a redraw is definitively the way to go – deblocker May 31 '16 at 12:34
  • @K. Tippenhauer: please see this: [Fiddle](http://jsfiddle.net/rh6fubtv/) - try to resize the window vertically, in your solution the canvas is simply hidden from the header & footer – deblocker Jun 03 '16 at 06:09