div設置height:100%;無效的緣由

時間 2019-11-12

標籤 div 設置 height 100% 無效緣由欄目 CSS 简体版

原文原文鏈接

有時咱們會困惑爲何設置div的height:100%;沒有效果，以下所示：html

要解決這個問題，先的知道設置height:100%的原理，當你讓一個元素的高度設置爲百分比高度時，是相對於父元素的高度根據百分比來計算高度。因此當父元素沒有高度時，height:100%也就沒有高度值，因此咱們來設置body高度。瀏覽器

可見仍是沒有效果，緣由跟上一個同樣，其父元素也沒有高度，因此咱們來設置html的高度。測試

可見產生了咱們想要的效果。spa

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>測試height100%</title>
</head>
<style>
   *{
      padding: 0;
      margin: 0;
   }
   html{
      height: 100%;
   }
   body{
      height: 100%;
   }
   .wqh{
      height: 100%;
      background-color: royalblue;
   }
</style>
<body>
<div class="wqh"></div>
</body>
</html>

進階

html 的父元素能夠理解成window，瀏覽器會將html填充完一個瀏覽器窗口。htm

設置html的height爲具體的像素值，當其值大於瀏覽器窗口時，瀏覽器出現滾動條，當其值小於瀏覽器窗口時，一樣會將html填充完整個瀏覽器窗口（能夠設置背景測試）。it

設置html的height爲百分比時，當其值大於100%出現滾動條，當小於100%時一樣會將html填充完整個瀏覽器窗口（能夠設置背景測試）。class

可是子html的子元素的高度設置成百分比時，會按照html設置的高度值計算比例。（以下所示，html高度爲1000px；因此body的高度爲500px）。原理

對於body的設置的高度小於瀏覽器窗口時，一樣會填充滿整個瀏覽器窗口（能夠設置背景測試），可是其子元素的高度設置成百分比時，會按照body設置的高度值來計算比例。進階

相關文章

相關標籤/搜索

無配置文件設置

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<