如何解決html、身體元的高度問題
- 云罗郡主轉載
- 2018-11-23 15:46:113215瀏覽
這篇文章帶給大家的內容是關於如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
首先：html元素和body元素都是區塊級元素。
簡述：有時我們會發現未設定height: 100%，html、body元素的高度卻是目前視窗的高度，看起來像是設定了height: 100%。
看下面兩個例子：
範例1：
<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>此時的container的高度為視窗高度的30%，html、body元素的高度皆為窗口的高度。
例2：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>此時container的高度為0，設定的height: 30%並未生效，html、body元素的高度皆為0。
原因：範例1未設定目前文件類型，預設啟用相容模式，相容模式下的html、body元素的高度即為視窗的高度，而範例2設定了，啟用標準模式，而標準模式下的html、body元素的高度均為0。
以上就是如何解決html、body元素的高度問題的全部介紹，如果您想了解更多有關Html5教程，請關注PHP中文網。
以上是如何解決html、身體元的高度問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除