很多人都知道,div容器在一般情况下即使设置高为100%也不会真的占满屏幕(浏览器窗口高度),那么究竟有没有办法用样式实现100%屏高呢?答案是肯定的。今天益吾库就来分享一下div百分百占满屏幕的两种css写法,一种是绝对定位方法,另一种是根容器百分比方法,具体实例代码如下:
绝对定位方法:
<style> *{ padding: 0; margin: 0; } #myDiv { width: 100%; height: 100%; background: red; position: absolute } </style> <body> <div id="myDiv"> 我是一个全屏DIV </div> </body>
根容器百分比方法:
原理:html和body本身没有高度,他们的高度是由子元素撑起来的,所以我们需要为其设置对应的百分比高度。
<style> *{ padding: 0; margin: 0; } html{ width: 100%; height: 100%; } body{ width: 100%; height: 100%; } #myDiv { width: 100%; height: 100%; background: red; } </style> <body> <div id="myDiv"> 我是一个全屏DIV </div> </body>