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

是否有一個簡單的僅限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/

來源

2016-05-31 deblocker

我猜你是怎麼做這個畫布上的一些圖紙，你可能不希望自己的圈子變成橢圓形，或有一些醜陋的抗鋸齒文物周圍的一切，那麼，唐不使用css調整畫布大小，或者至少不要忘記設置自己的'.width'和'.height'屬性**。 – Kaiido

@Kaiido，只是爲了完整性，對於「省略號」我寧願去var aspect = canvas.clientWidth/canvas.clientHeight;如webglfundamentals – deblocker

你的意思是說這樣的嗎？

編輯：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>

來源

2016-05-31 08:51:30

中提出的一些更多[詳細]（http://stackoverflow.com/a/30487045/1693593）上的對象適合。請注意，實際的位圖*大小*沒有改變。您可以使用'getBoundingClientRect（）'讀取像素大小，並在調整大小後將畫布元素設置爲那些值（當然，重繪也是必要的）。 – K3N

我同意K3N，也是由於'object-fit'不好的支持來做重繪，這肯定是要去的地方 – deblocker

@K。 Tippenhauer：請看這個：[Fiddle]（http://jsfiddle.net/rh6fubtv/） - 嘗試垂直調整窗口的大小，在你的解決方案中，畫布是簡單地從頁眉和頁腳隱藏的 – deblocker

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

回答

相關問題