為什么html元素不占用整個瀏覽器視口？
[英]Why doesn't the html element take up the whole browser viewport?
問題描述
我一直在網站上工作。 許多人聲稱html元素擴展到整個視口。 當我做這樣的代碼：
<!doctype html>
<html>
<head>
<style>
html{
border:1px solid red;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
Hi
</body>
</html>
邊框僅顯示在屏幕的頂部，顯示“Hi”。 是不是html應該默認適合瀏覽器中的整個屏幕？
2 個解決方案
解決方案1
5 已采納 2014-05-12 01:51:47
盡管是根元素，但html在CSS方面沒有特殊的屬性; 它是正常流程中的常規塊框，默認情況下，塊框沒有固有高度。 默認高度為auto ; 如何具體細節auto在描述計算規范 ，但基本上在流動塊盒，這意味着一樣高，他們需要的內容，並沒有更多的。 這同樣適用於body元素。
請注意，如果為html指定背景顏色，則該背景顏色將傳播或“滲透”到整個視口上，盡管html的高度不會更改。 這種行為是有意的（背景也可以以類似的方式從body傳播到html ）; 請參閱我對這些相關問題的答案以獲得解釋：
另請注意，您期望的行為，即
是不是
html應該默認適合瀏覽器中的整個屏幕？
確實適用於怪癖模式和非常舊版本的IE（早於6）; 主要是由於對Web標准定義不嚴格的依從性差（這是原始CSS2推薦發布的時候，CSS本身仍然處於起步階段）。 也就是說，在怪癖模式下， html和body元素確實都是視口高度的100％，並且上述html和body默認為內容高度的行為僅適用於標准模式。
解決方案2
1 2014-05-12 01:52:21
不html和body標簽的高度默認值為auto 。 所以你需要做類似的事情
html,body {
height: 100%;
}
默認情況下，僅為屏幕的完整大小呈現這些元素的背景。
為什么帶有背景的父元素不能覆蓋寬度大於視口的子元素？
[英]Why doesn't a parent element with a background cover a child element with a width larger than the viewport?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.