height：100%不起作用！

柔光的暖阳◎ 2022-06-12 09:59 335阅读 0赞

近日小伙伴们，在布局的是需要用到将某个div全屏铺满！无论怎么使用height属性，都无法满足自己的要求！让我回忆起自己第一次遇到这样的布局需求，也绕了不少弯路！今天就记录一下！以免自己日后忘却！

任务需求： 将div宽高铺满全屏！  
先准备一个简单的html布局

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> #box{ width: 100%; background: red; } </style>
    </head>
    <body>
        <div id="box">hello world!</div>
    </body>
    </html>

想到铺满全屏的话，就很容易想到这样的代码！

#box{ height: 100% }

但是，很遗憾!box并不能全屏显示！这是为什么呢？

其实道理很简单的！  
100%这个属性值可以理解为一个计算属性！它是需要有一个基准值！而这个基准值就是其父级元素的高度值！

如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> #test{ height: 500px; border: 2px solid red; } #test .inner{ height: 80%; background: blue } </style>
    </head>
    <body>
        <div id="test">
            <div class="inner">我的高度是父级的80%</div>
        </div>
    </body>
    </html>

效果如下：  
![效果图][SouthEast]

可以看到百分比的属性值起到作用了！主要的原因相信大家都看到了，就是我给 \#test的盒子加了高度值：

#test{ height: 500px; }

这样一来 .inner的就有了基准值了，所以就可以使用了！

好！基础铺垫完毕！我们回到最初的地方！

### 方法一、找到\#box的父级及以上节点，并给它们添加高度值！ ###

html,body{ height: 100%; min-height: 100%!important; }

大家可以看gif！100%已经起到效果了，唯一不足的就是拖动时候 会有抖动！  
![这里写图片描述][SouthEast 1]

其实很简单！因为body默认会有8px的margin值！解决抖动的代码如下：

body{ margin: 0; }

### 方法二、改变position属性 ###

如果你嫌弃上面的方法过于繁琐！那么我们还可以这样的做：

#box{ position: absolute; //position: fixed; //或者利用这样的方法 left: 0; top: 0; height: 100%; width: 100%; }

这样的写法，省略了个body,html添加属性值。仅仅给\#box添加就行！原理是将\#box脱离文档流，height的值就可以响应屏幕的高度了！

还有就是width:100%记得写上，否则宽度无用!!!

### 方法三：css3新特性 vh vw ###

随着css技术的发展，css3给我们提供一个视图的属性单位叫做vw vh等等。利用这个技术我们可以更简单的完成上面的需求。

#box{ height: 100vh; width: 100vw; }

看图：  
![这里写图片描述][SouthEast 2]

是不是很神奇啊！  
简单解释一下：

*  vh 就是将你的屏幕高度分成100份！
 *  vw就是将你的屏幕宽度分成100份！

这样你写前面的值就是div的高度！当然你如果想学习更多的关于vh vw的属性 。大家可以阅读一下下面的文章！

当然CSS3属性还是请大家慎用 慎用！  
[https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/][https_web-design-weekly.com_2014_11_18_viewport-units-vw-vh-vmin-vmax]  
[https://css-tricks.com/viewport-sized-typography/][https_css-tricks.com_viewport-sized-typography]

好的！放水完毕！大家有新的方法，请留言！

下一篇我将会介绍 这样布局，会有什么bug 以及如何处理！

[SouthEast]: /images/20220612/7d201ef13577464f8b8411fa05395a7e.png
[SouthEast 1]: /images/20220612/afdd419f3bed4d748c513572f8ba933e.png
[SouthEast 2]: /images/20220612/58af1e9f42ad487eb8b29e5fe36eaaef.png
[https_web-design-weekly.com_2014_11_18_viewport-units-vw-vh-vmin-vmax]: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
[https_css-tricks.com_viewport-sized-typography]: https://css-tricks.com/viewport-sized-typography/