如何使用頁眉和頁腳將畫布拉伸至頁面全高？

Question

是否有一個簡單的僅限CSS的解決方案來製作HTML5畫布以填充頁眉和頁腳之間的整個空間？

頁眉和頁腳的高度已知且固定，所有元素應該具有100％的寬度。關鍵點在於標記和樣式的簡單性，並避免包裝div。

這是我的標記：

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

雖然頁眉和頁腳之間的全高div的問題似乎是一個更容易解決，並且有上SO已經有一些很細的答案，我無法想象一種與畫布相同的方式。

小提琴：http://jsfiddle.net/h7smdykf/

Answer 1

你的意思是說這樣的嗎？

編輯：Jep，他們是正確的，拉伸帆布skrews你的元素。我有點進一步與「對象適合」 https://www.w3.org/TR/css3-images/#the-object-fit

使用「對象適合」從https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element

EDIT2建議：還有垂直取向的問題。圈子應該在頁面的中間。

z-Index解決了這個問題。

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>