近日小伙伴们,在布局的是需要用到将某个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 以及如何处理!