【CSS系列】height:100%設置div的高度

時間 2021-08-13

標籤 css html 瀏覽器 ide 佈局 spa htm 對象 blog get 欄目 CSS 简体版

原文原文鏈接

1、div設置百分百高度實現描述

在html佈局中body內第一個div盒子對象設置100%高度height樣式，是沒法成功顯示100%高度的。這個是由於body高度默認值爲自適應的，因此及時設置body第一個佈局div高度爲百分比也是無效的，由於div解析上級高度爲0，天然div height 100%實際高度也爲0。css

瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(致使滾動條出現)。或者你給整個頁面設置一個絕對高度。不然，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。html

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

若是想讓一個元素的百分比css高度height: 100%;起做用，你須要給這個元素的全部父元素的高度設定一個有效值。ide

2、未實現div height 100%示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>未成功設置100%高度</title>
 6 </head>
 7 <body>
 8 <div style="height: 100%;background-color: #4d85d1">
 9     所在div設置高度100%
10 </div>
11 </body>
12 </html>

div有兩個父元素html和body，若是想讓div的百分比高度起做用的話就要爲html和body設置高度佈局

3、實現div高度100%的示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>成功設置100%高度</title>
 6     <style type="text/css">
 7         html,body{
 8             height: 100%;
 9         }
10     </style>
11 </head>
12 <body>
13 <div style="height: 100%;background-color: #4d85d1">
14     所在div設置高度100%
15 </div>
16 </body>
17 </html>

以上雖然實現了div的高度爲100%，可是右側出現了滾動條，這是由於body有必定的margin,也就是body默認有margin-top和margin-bottom因此設置100%高度以後body多餘的margin值顯示不完整，出現下拉滾動條，要想正確顯示的話就要對body設置margin爲0.spa

4、這是高度100%生效，去掉滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成功設置100%高度去除滾動條</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<div style="height: 100%;background-color: #4d85d1">
    所在div設置高度100%
</div>
</body>
</html>

5、總結

要實現最外層div高度爲100%（百分之百），關鍵對html和body要設置高度100%,若是隻設置html和body標籤其中一個高100%，也是沒法實現body內第一個盒子高度100%的。但猶豫body默認有必定margin值，但設置body高度height 100%後，瀏覽器就會出現滾動條，因此能夠對body設置margin爲零，去除間距實現div height 100%也無滾動條效果。htm