html div高度 满屏幕,div百分百占满屏幕的两种css写法

很多人都知道，div容器在一般情况下即使设置高为100%也不会真的占满屏幕(浏览器窗口高度)，那么究竟有没有办法用样式实现100%屏高呢？答案是肯定的。今天益吾库就来分享一下div百分百占满屏幕的两种css写法，一种是绝对定位方法，另一种是根容器百分比方法，具体实例代码如下：

绝对定位方法：

*{

padding: 0;

margin: 0;

}

#myDiv {

width: 100%;

height: 100%;

background: red;

position: absolute

}

我是一个全屏DIV

根容器百分比方法：

原理：html和body本身没有高度，他们的高度是由子元素撑起来的，所以我们需要为其设置对应的百分比高度。

*{

padding: 0;

margin: 0;

}

html{

width: 100%;

height: 100%;

}

body{

width: 100%;

height: 100%;

}

#myDiv {

width: 100%;

height: 100%;

background: red;

}

我是一个全屏DIV