将div铺满body三种方式

简介: 将div铺满body三种方式

错误做法

想要令body里一个块元素(div)占全屏,相信很多人(包括我)都会直接把body设置宽高100%,但实际却是,行不通

body{ width:100%; height:100%;}

原因:

因为body跟div一样是块元素,直接赋值给块元素height:100%,相当于就是默认值的独占一行。
所以这里写body{ width:100%; height:100%;},其实是毫无作用的。
《css权威指南》指出,如果没有显示声明包含块的height,百分数高度会重置为auto,所以上面div1height设置为任何值都跟设置没设置一样。

第一种方式

给div设置{position: absolute; top: 0px; bottom: 0px;}

<style class="text/css">
    body{
        padding: 0px;
        margin: 0px;
    }
    .box{
        background-color: yellow;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        bottom: 0px;
    }
</style>
<body>
    <div class="bg"></div>
</body>

第二种方式

加上html,body{ width:100%; height:100%; }

<style class="text/css">
    body{
        padding: 0px;
        margin: 0px;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .box{
        background-color: yellow;
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="bg"></div>
</body>

第三种方式(常用)

给该元素设置{min-width: 100%; min-height: 100%; position: absolute;}
优点:①简洁,②缩小浏览器,拉动滚动条也还是满屏背景

<style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
    .bg {
        min-width: 100%;
        min-height: 100%;
        position: absolute;
        background: yellow;
    }
</style>
<body>
    <div class="bg"></div>
</body>```
目录
相关文章
|
6月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
79 0
|
6月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
57 0
|
4月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
226 3
layui设置textarea高度几种方式
layui设置textarea高度几种方式
341 0
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
213 0
|
前端开发 容器
CSS样式(三) - div盒子
CSS样式(三) - div盒子
176 0
CSS样式(三) - div盒子
|
Web App开发 容器
Div并排显示
Div并排显示
|
前端开发
div 居中方法汇总
居中问题无论在工作还是在面试中, 都是很常见的 下面我来给大家总结几种常用的方法, 大家可根据实际情况选择 好了, 废话不多说, 先看下效果 法1 定位+偏移 (margin) html css .
1053 0