CSS中元素的height:100%如何起作用的?自適應高度 -开发者知识库

CSS中元素的height:100%如何起作用的?自適應高度 -开发者知识库,第1张

Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值,那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。而當你設置一個頁面元素的高度(height)為100%時,期望這樣元素能撐滿整個瀏覽器窗口的高度,但大多數情況下,這樣的做法沒有任何效果。你知道為什么height:100%不起作用嗎?

答:

高度的計算方式完全不一樣。事實上,瀏覽器根本就不計算內容的高度,除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則,瀏覽器就會簡單的讓內容往下堆砌,頁面的高度根本就無需考慮。

因為頁面並沒有缺省的高度值,所以,當你讓一個元素的高度設定為百分比高度時,無法根據獲取父元素的高度,也就無法計算自己的高度。換句話說,父元素的高度只是一個缺省值:height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時,只能得到undefined的結果。也就是一個null值,瀏覽器不會對這個值有任何的反應。

如何使用絕對定位來使得自適應屏幕高度:將父級添加height:100%或者將元素絕對定位

 

1.<style>
*{padding: 0;margin: 0;}
body,html{height: 100%;}//父級元素都添加
#wrap{width: 100%;height: 100%;background: red;
/*position: absolute;left: 0;top: 0;*/
}

</style>
<title>Title</title>
</head>
<body>
<div id="wrap"></div>
</body>
2. <style>

*{padding: 0;}
        #wrap{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}//不加絕對定位高度是撐不開的
</style>
<title>Title</title>
</head>
<body>
<div id="wrap"></div>
</body>

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复