div百分百占满屏幕的两种css写法

8年前 (2018-09-03)CSS8.5k

复制本页网址打印

很多人都知道，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>

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！