ヘッダーとフッターでページ全体の高さにキャンバスを伸ばす方法は？

Question

ヘッダーとフッターの間のスペース全体を埋めるためにHTML5キャンバスを作成する単純なCSSのみのソリューションはありますか？

ヘッダーとフッターの高さは既知で固定されています。すべての要素の幅は100％である必要があります。ここでのポイントは、マークアップとスタイルの単純さと、ラッパーdivを避けることです。

これは私のマークアップです：ヘッダーとフッターの間にフルハイトのdivの問題を解決することが非常に簡単であるように思わながら

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

、およびSOすでにいくつかの非常に細かい回答にありますが、私キャンバスで同じものを得る方法を考え出すことができません。

フィドル：http://jsfiddle.net/h7smdykf/

Answer 1

は、あなたがこのように意味しますか？

編集：Jep、彼らは正しいです、あなたの要素の上にキャンバスを描く。垂直方向の配置に問題がまだある：私は「オブジェクトフィット」の使用「オブジェクトフィット」https://www.w3.org/TR/css3-images/#the-object-fit

とさらに少しだがhttps://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element

EDIT2から示唆されました。サークルはページの中央にある必要があります。

z-インデックスは問題を解決します。

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>