前端小知識--爲何你寫的height:100%不起做用？

時間 2019-11-07

標籤前端知識爲何寫的 height 100% 不起简体版

原文原文鏈接

爲何你寫的height:100%不起做用？

這個知識不算冷門的，可是用的時候可能仍是會有些懵逼，不能生效時搜一搜就能找到答案了，可是你真的懂了嗎？爲何想要設置一個全屏元素的時候，高度不受%的控制？

1.百分比寬高的設定

按照w3c中的width和height屬性，能夠明確%設定寬高是根據父元素的寬高來的：
http://www.w3school.com.cn/cs...
http://www.w3school.com.cn/cs...css

2.width:100%;

咱們寫下這樣一段代碼，隨意設置一個背景色便於觀察元素html

<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//寬100%，咱們如今看到的高是屬於font-size的，而不是100%；

<body>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    width:100%;height:200px;
    </div>
</body>
//效果以下

能夠看到基本上寬的100%很容易就實現的，可是這裏的height卻不能設置成%比的（該元素會消失看不見），這是爲何呢？git

3.瀏覽器是如何計算高度和寬度的

Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。若是你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即咱們不設置寬，會自動填滿整個橫向寬度，以下：github

<div style="height:100%;">height:100%;</div>

可是高度的計算方式徹底不同。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(致使滾動條出現)。或者你給整個頁面設置一個絕對高度。不然，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
由於頁面並無缺省的高度值，因此，當你讓一個元素的高度設定爲百分比高度時，沒法根據獲取父元素的高度，也就沒法計算本身的高度。
即父元素的高度只是一個缺省值：height: auto;咱們設置height：100%時，是要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能獲得undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
各個瀏覽器對於寬高的解析也不相同，你們能夠本身搜索一下。
參考：http://www.webhek.com/post/cs...web

4.如何解決

如今你知道了吧，%是一個相對父元素計算得來的高度，要想使他有效，咱們須要設置父元素的height;
要特別注意的一點是，在<body>之中的元素的父元素並不單單只是<body>，還包括了<html>。
因此咱們要同時設置這二者的height，只設置其中一個是不行的：瀏覽器

html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

5.關於line-height居中的一點誤解？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            color: white;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;">height:100%;</div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>

所有代碼如上，能夠看到設置了line-height爲100%沒有居中，這是爲何呢，由於這時候的%是相對於字體尺寸的？因此直接做用於沒有絕對高度的元素是不行的。post

line-height屬性說明：http://www.w3school.com.cn/cs...
這時候要想居中，能夠以下，作一個div嵌套，一個負責高度，一個負責居中，雖然感受並不會這樣用到，可是居中仍是很靈驗的~字體

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .div1 {
            background-color: blueviolet;
            position: relative;
        }

        .div2 {
            font-size: 30px;    
            color: white;
            text-align: center;                    
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%)  translateY(-50%);
        }
    </style>
</head>

<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;" class="div1">
        <div class="div2">height:100%;</div>
    </div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>

</html>