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

2018年09月03日 11:00:00益点益滴2407

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


超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]

深切哀悼

抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞!

×
M