height：100%不起作用！

来源：互联网发布：网络管理基本功能编辑：程序博客网时间：2024/06/02 02:12

近日小伙伴们，在布局的是需要用到将某个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>

效果如下：
效果图

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

#test{    height: 500px;}

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

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

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

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

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

其实很简单！因为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;}

看图：
这里写图片描述

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

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

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

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

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

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

阅读全文

0 0