By admin
强化（一）解决body和div全屏填充的问题
目录强化（一）解决body和div全屏填充的问题问题解决方式举例htmlcss
问题
在设置body全屏填充的时候（直接设置div为100%）：body未填满或body填满过头
在设置body里的div全屏填充的时候（直接设置div为100%）：div未填满或div填满过头（出现滚动条）或div偏离方向
解决方式
下面两步都要做，不能只做一步
将全局的margin和padding都设置为0，防止不同浏览器默认值不同而造成显示效果出现误差
“*”代表全局
*{
margin: 0;
padding: 0;
}
将html和body的高和宽都设置为100%（必须都设置）
html,body{
width: 100%;
height: 100%;
}
举例
html
css
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-image: url(../picture/背景图1.jpg);
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no;
}
.div1{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, 0.169);
}