将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>```

将div铺满body三种方式相关推荐

React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别和三种方式写光棒事件动画...
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
React绑定this的三种方式
转载自 React绑定this的三种方式 React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方 ...
深入解析React创建组件的三种方式
eact创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同 1.函数式无 ...
使用javascript实现在页面打印的效果的三种方式
<div id="console"></div><script type="text/javascript">var con ...
html一般用那种方式定位,使用三种方式定位html中的元素
使用三种方式定位html中的元素发布时间:2020-06-06 14:46:00 来源:51CTO 阅读:687 作者:知止内明 1)使用三种方式定位html中的元素 a)通过ID $(" ...
vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
JS绑定事件三种方式
三种方式 1.在DOM中直接绑定 2.在JS代码中直接绑定 3.使用事件监听函数绑定事件一.在DOM中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子 ...