明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

如何處理html、body元的高度問題

發(fā)表時間：2023-08-27 來源：明輝站整理相關軟件相關文章人氣：

[摘要]本篇文章給大家?guī)淼膬热菔顷P于如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。首先：html元素和body元素均為塊級元素。簡述：有時我們會發(fā)現(xiàn)未設置height: 100%，html、body元素的高度卻為當前窗口的高度，看上去像是設置了h...
本篇文章給大家?guī)淼膬热菔顷P于如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

微信截圖_20181123154452.png

首先：html元素和body元素均為塊級元素。

簡述：有時我們會發(fā)現(xiàn)未設置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設置了<!DOCTYPE html>，啟用標準模式，而標準模式下的html、body元素的高度均為0。

以上就是對如何解決html、body元素的高度問題的全部介紹，如果您想了解更多有關Html5教程，請關注PHP中文網(wǎng)。

以上就是如何解決html、body元的高度問題的詳細內容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網(wǎng)站。