為什么你寫的height:100%不起作用

發(fā)布時(shí)間：2021-05-10 15:34:47 作者：西伯利亞虎

我要評論

這篇文章主要介紹了為什么你寫的height:100%不起作用？這個(gè)知識(shí)不算冷門的，但是用的時(shí)候可能還是會(huì)有些懵逼，下面小編就詳細(xì)介紹一下

為什么你寫的height:100%不起作用？

這個(gè)知識(shí)不算冷門的，但是用的時(shí)候可能還是會(huì)有些懵逼，不能生效時(shí)搜一搜就能找到答案了，但是你真的懂了嗎？為什么想要設(shè)置一個(gè)全屏元素的時(shí)候，高度不受%的控制？

1.百分比寬高的設(shè)定

按照w3c中的width和height屬性，可以明確%設(shè)定寬高是根據(jù)父元素的寬高來的：
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

2.width:100%;

我們寫下這樣一段代碼，隨意設(shè)置一個(gè)背景色便于觀察元素。注意以下代碼，記得加上<!DOCTYPE html>，否則會(huì)有所不同。

<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//寬100%，我們現(xiàn)在看到的高是屬于font-size的，而不是100%；

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

可以看到基本上寬的100%很容易就實(shí)現(xiàn)的，但是這里的height卻不能設(shè)置成%比的（該元素會(huì)消失看不見），這是為什么呢？

3.瀏覽器是如何計(jì)算高度和寬度的

Web瀏覽器在計(jì)算有效寬度時(shí)會(huì)考慮瀏覽器窗口的打開寬度。如果你不給寬度設(shè)定任何缺省值，那瀏覽器會(huì)自動(dòng)將頁面內(nèi)容平鋪填滿整個(gè)橫向?qū)挾?。即我們不設(shè)置寬，會(huì)自動(dòng)填滿整個(gè)橫向?qū)挾?，如下?/p>

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

但是高度的計(jì)算方式完全不一樣。事實(shí)上，瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)條出現(xiàn))?；蛘吣憬o整個(gè)頁面設(shè)置一個(gè)絕對高度。否則，瀏覽器就會(huì)簡單的讓內(nèi)容往下堆砌，頁面的高度根本就無需考慮。
因?yàn)轫撁娌]有缺省的高度值，所以，當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比高度時(shí)，無法根據(jù)獲取父元素的高度，也就無法計(jì)算自己的高度。
即父元素的高度只是一個(gè)缺省值：height: auto;我們設(shè)置height：100%時(shí)，是要求瀏覽器根據(jù)這樣一個(gè)缺省值來計(jì)算百分比高度時(shí)，只能得到undefined的結(jié)果。也就是一個(gè)null值，瀏覽器不會(huì)對這個(gè)值有任何的反應(yīng)。
各個(gè)瀏覽器對于寬高的解析也不相同，大家可以自己搜索一下。

4.如何解決

現(xiàn)在你知道了吧，%是一個(gè)相對父元素計(jì)算得來的高度，要想使他有效，我們需要設(shè)置父元素的height;
要特別注意的一點(diǎn)是，在<body>之中的元素的父元素并不僅僅只是<body>，還包括了<html>。
所以我們要同時(shí)設(shè)置這兩者的height，只設(shè)置其中一個(gè)是不行的：

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

5.關(guān)于line-height居中的一點(diǎn)誤解？

<!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>

全部代碼如上，可以看到設(shè)置了line-height為100%沒有居中，這是為什么呢，因?yàn)檫@時(shí)候的%是相對于字體尺寸的？所以直接作用于沒有絕對高度的元素是不行的。

line-height屬性說明：https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

這時(shí)候要想居中，可以如下，做一個(gè)div嵌套，一個(gè)負(fù)責(zé)高度，一個(gè)負(fù)責(zé)居中，雖然感覺并不會(huì)這樣用到，但是居中還是很靈驗(yàn)的~

<!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>