高度和寬度上html和body元素

如果我有下面的標記高度和寬度上html和body元素

<html> 
<body> 
<div id="wrapper"> 
<div id="container"> 
<p>Lots of pragraphs here</p> 
</div> 
</div> 
</body> 
</html>

與以下樣式

html, body, #wrapper 
{ 
width: 100%; 
height: 100%; 
} 
#container 
{ 
width: 960px; 
margin: 0 auto; 
}

爲什麼沒有我的HTML，身體和包裝元素延伸到100％的高度FF13中的瀏覽器/視圖端口。在Firebug中查看時，html，body和wrapper在離底部一定距離處垂直停止。容器div擴展到完整高度，因爲它的高度取決於內容。

（1263px X 558px爲HTML，身體，包裝物）和（960像素X爲880px容器）

綜觀默認100％以上發生如下所示的第一圖像。但是，當我放大到最後的放大縮小時，上述情況不會發生，因爲下面的第二個圖像顯示，並且html，body，wrapper擴展到了整個高度。

（4267px X 1860px爲HTML，身體，包裝器） - （960像素X 1000像素爲容器）

enter image description here

來源

2012-08-16 Jawad

'包裝'和'容器'無效HTML元素：/ – 2012-08-16 21:06:54

@BillyMoat：它是一個div而不是包裝元素。

– Jawad 2012-08-16 21:09:21

@BillyMoat：因爲是拼寫錯誤而更改。 – Jawad 2012-08-16 21:11:07

你html實際上正好延伸到這裏你的事業視視的100％高度的瀏覽器窗口，而不是內部的內容。

考慮這個（jsfiddle）：

<div id="div1"> 
    <div id="div2"> 
     <div id="div3"> 
      very much content 
     </div> 
    </div> 
</div> 

#div1 { 
    height:300px; 
    overflow-y:scroll; 
    border: 1px solid black; 
} 
#div2 { 
    height:100%; 
} 
#div3 { 
    height:600px; 
}

div1這裏擁有300像素的高度和滾動。當您滾動內容時，只需移動內部div，但高度保持不變即300px。如果將height:100%設置爲html，則會發生同樣的情況。您的瀏覽器高度保持不變。

當您縮小視口時，您並未滾動，因此內容的高度小於視口的高度。

不久，html {height:100%}涉及父母的高度不內部內容的高度

UPDATE：

可以指定3種類型的值，以所述塊元件的高度的：

長度 - 設定固定高度（例如， '200px'，'50em'）。就是這些，我可以再多說一點。
百分比 - 從W3C spec：

的百分比相對於所生成的框的包含塊的高度來計算。如果未明確指定包含塊的高度（即，它取決於內容高度），並且該元素沒有被絕對定位，則該值計算爲'auto'。根元素上的百分比高度與初始包含塊相關。

自動 - 高度依賴於其他屬性的值。（一般對內部內容高度：文本，其他內聯元素，塊元素等）

時，瀏覽器顯示您的網頁發生了什麼：

它得到height: 100%爲<html>。這意味着所產生的高度是相對於包含塊（initial containing block，即在該情況下爲browser window）的所生成的盒子（在該情況下爲html-元素）的高度來計算的。假設1024px。
那麼<body>需要height: 100%。它會將body的高度設置爲html的已計算高度，即1024px。
然後瀏覽器將height:auto應用到#wrapper然後#container和<p>。我不知道它是如何做到這一點，但可以推測它推遲了高度設置（以及分別取決於背景，邊界等的所有其他樣式）並且繼續到內部內容。
下一點是文字內容。瀏覽器採用指定的相關屬性或它自己的屬性，即default styles，如font-family，font-size和文本的高度。
之後它將高度設置爲<p> -element，因此<p>將向下展開以包含所有內容（在這種情況下爲文本）。 #container和#wrapper也是如此。

如果它發生了#wrapper的高度比人體的一個（1024 px，因爲它進行了約定），比overflow應適用於body更大。那是默認的visible。然後overflow: visible適用於html。然後瀏覽器顯示滾動整個window。老實說，我不知道這是W3C規範所規定的，但可以假設它是。

所以當你滾動窗口時，你的html和body和所有其他元素一樣被移動。這是相同的行爲是與任何其它元素（如在的jsfiddle我張貼以上）：

scrolled part of the body

注意，背景被設定在body元件上，但它延伸到整個canvas即遠遠超出了body元素本身。這是關於可能需要在身體上設置bg屬性的問題。這是符合其中規定的W3C spec（板缺）100％：

對於文檔根元素是已計算的「透明」的值「背景色」和「一個......「HTML」元素none'爲'background-image'時，用戶代理必須改爲使用該元素的第一個...「body」元素子元素的背景屬性的計算值，當繪製背景爲畫布，並且不得繪製背景子元素。這些背景也必須與它們僅用於根元素時相同的點上。

當您縮小頁面時，瀏覽器會重新計算所有尺寸。比方說，每個Ctrl + -單擊頁面縮小，例如，20％。然後，所有的文字被降低，導致其高度取決於字體大小，這是由Ctrl + -點擊的影響，相應地<p>，#container和#wrapper所有減少的原因他們的高度取決於text的高度。但body和html的高度取決於window的高度，不受Ctrl + -點擊的影響。這就是爲什麼你最終得到這個： zoomed out page

在這種情況下寬度和高度行爲沒有區別。您看不到橫向尺寸的問題，因爲您已經爲#container設置了width: 960px;，結果小於瀏覽器窗口的寬度，因此不會發生溢出。如果#container的寬度都超過身體的寬度，你會看到： same issue but with the width

這一切是正常的和預期的行爲，並沒有什麼在這裏解決。

來源

2012-08-16 22:07:08 user907860

那麼如何解決這個問題。如果我給背景顏色的div＃包裝（在你的情況的div＃3），背景顏色（如紅色）只擴展到HTML和身體（在你的情況下，div＃1和div＃2）相同的高度和這會導致背景顏色不能擴展到全高，縮小時只有一部分是紅色的，而底部的某些部分是白色/透明的（html和body的顏色）。 – Jawad 2012-08-16 22:13:00

@Jawad，你可以附加背景到你的內容的一些包裝，所以它會相應地擴展。你也可能想要使用所謂的'sticky footer'，所以如果沒有足夠的內容（如你的第二張圖片），頁腳將在窗口的底部。看到這個http://stackoverflow.com/questions/11606856/background-repeat-with-html-body-height-to-100-with-css-sticky-footer/11606934#11606934 – user907860 2012-08-16 22:18:15

我知道所有關於粘腳。檢查我的配置文件。我不是這樣問的。我也不希望html {height：100％}擁有內容的高度。它與內容無關（在我的情況下，div＃容器）。我希望html，body和div＃wrapper的高度爲100％，因爲它的寬度爲100％。如果它涉及父級的高度，那麼div＃wrapper的父級是body，body的父級是html，父級是瀏覽器窗口/視口。給定包裝（背景顏色爲紅色）和100％高度設置HTML，身體＆div＃包裝會導致此問題。 – Jawad 2012-08-16 22:30:29

因爲不可能將高度設置爲100％，如果該元件可相對於瀏覽器窗口。其原因是由於滾動，您的瀏覽器窗口可能會無限大。你將不得不設置一個固定的高度，否則你只需要將高度設置爲擴展到其中的任何內容。

但是width: 100%;是完全有效的。

您還需要使用有效的html標籤。我會做的是，而不是使用<包裝>和<容器>，我會在你的CSS做一個類。類名是通過以句號開頭來聲明的。

.container{ 
width: 100%; 
} 

<div class="container"></div>

好運，

-Brian

來源

2012-08-16 21:07:39 OneChillDude

那麼爲什麼放大時它工作？ – Jawad 2012-08-16 21:18:20

原因你縮小時沒有滾動，只是 – user907860 2012-08-16 21:52:34

@caligula：是的，它很簡單。使用@發表評論。 – Jawad 2012-08-16 21:59:01

高度和寬度上html和body元素

回答

相關問題