CODEWITHSUNDEEP
csshtml5-canvas
deblocker
deblocker

Reputation: 7697

How to stretch a canvas to page full height with header & footer?

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/

Upvotes: 2

Views: 1276

Answers (1)

K. Tippenhauer
K. Tippenhauer

Reputation: 326

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>

Upvotes: 5

Related Questions