将div铺满body三种方式

本文介绍: css权威指南》指出，如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面div1height 设置为任何值都跟设置没设置一样。想要令body里一个块元素（div）占全屏，相信很多人（包括我）都会直接把body 设置宽高100%，但实际却是，行不通。因为body跟div一样是块元素，直接赋值给块元素 height:100%，相当于就是默认值的独占一行。所以这里写body{ width:100%;}，其实是毫无作用的。优点：①简洁，②缩小浏览器，拉动滚动条也还是满屏背景。

错误做法

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

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

原因：

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

第一种方式

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

&lt;style class="text/css"&gt;
    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>```