如何解決html、身體元的高度問題-html教學-PHP中文網

首頁

web前端

html教學

如何解決html、身體元的高度問題

云罗郡主

Nov 23, 2018 pm 03:46 PM

body html 高度

這篇文章帶給大家的內容是關於如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

如何解決html、身體元的高度問題

首先：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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn