CSS定位的畫布大小與其他塊元素大小不同（左上角右下屬性的限制）

這讓我很困惑，而且很有趣，我希望。CSS定位的畫布大小與其他塊元素大小不同（左上角右下屬性的限制）

我感興趣的是，如果有人能指出我在源的行爲在CSS /帆布規格方面的差異，我知道如何填充父容器的其他解決方案，所以請不要這樣的答案。

考慮這個HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <style type="text/css"> 
     html, body, #container { 
     height: 100%; width: 100%; padding: 0; margin: 0; 
     } 

     #container { 
     position: relative; 
     } 

     #content { 
     position: absolute; 
     border: 1px solid red; 
     background-color: blue; 

     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     width: auto; 
     height: auto; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="container"> 
     <canvas id="content"></canvas> 
    </div> 
    </body> 
</html>

的jsfiddle：http://jsfiddle.net/2zH5H/。此HTML導致畫布的大小與canvas規格要求的默認寬度/高度（300x150）一致，而不是像CSS規則定義的那樣填充父容器。您可以驗證此作品，而不對其他任何塊元素進行更改，例如div：http://jsfiddle.net/8AQVj/1/

此外，我們討論的是屏幕上元素的大小，而不是畫布上下文的維度。 Chrome，Firefox和IE中的行爲是一致的，所以我想它必須來自某處的規範，但我找不到相關的片段。

來源

2013-07-15 dawid.weiss

我想這與有默認大小的元素有關（你已經注意到了）：http://jsfiddle.net/8AQVj/2/ – Passerby

您在此處爲畫布設置的尺寸屬性設置爲auto，這是這些屬性的默認值，因此在此情況下您將獲得默認尺寸。如果將其更改爲繼承，則即使其標記中指定的上下文設置爲特定度量，它也會填充其父容器。爲了確保我是對的，我在小提琴中檢查了它。

來源

2013-07-15 16:46:13 jDesign

不，不是真的。繼承將實際上繼承父容器的寬度和高度，它不同於基於top/left/right/bottom重新計算它 - 嘗試使邊框更寬（10px），並且您會看到與我的div示例相比的差異當寬度/高度被繼承時，嵌套容器會溢出）。 –

也可以使用100％的畫布尺寸屬性來消除溢出。與所有元素一樣，這裏有一個瀏覽器默認值。我的意思是將高度和寬度設置爲自動調用默認值，並且不要求計算父級的重新調整大小。我錯過了什麼嗎？ – jDesign

好的，現在我想看看你在做什麼。我所知道的唯一的事情就是畫布是一個塊元素，但是就像一個類似於圖像的內聯塊元素。這就是爲什麼一個默認的畫布不像其他基本的包含塊（如div和form）那樣跨越它的父項。但是，有許多塊元素的特質，請看看是否將畫布更改爲p。至於這個來源，如果我找到一個，我會發佈一個。 – jDesign

CSS定位的畫布大小與其他塊元素大小不同（左上角右下屬性的限制）

回答

相關問題