问题一：body{width:100%}但窗口出现滚动条
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>body{width":100%;}窗口有滚动条</title>
<style>
body{
width:100%;}
div{
background-color:pink;
}
</style>
</head>
<body>
<div>块</div>
</body>
</html>
运行结果为：横向出现滚动条。
原因分析：
一个对象高度是否可以使用百分比显示，取决于对象的父级对象。 width=100%的基准是谁，也就是说它是相对于谁而言的?它的参照物是谁？根据CSS的相关知识我们知道，当子元素没有设置样式时，子元素会继承其父元素的样式，而在本例当中，父元素body的父元素又是谁呢？答案是标签html。
html标签也可以理解为当前浏览器的可视窗口，所以它的宽度是整个浏览器窗口的宽度，而浏览器具有放大缩小的功能，所以它就会把子元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，子元素的内容就会随着浏览器窗口的可视宽度进行显示
修正方法：
- 添加 *{margin=0；}（推荐）
原因：浏览器的默认margin不一定为0，当确认margin=0，body与html的width大小相同，不再出现滚动条。
此外，添加 *{margin=0；padding=0;}应成为一个习惯，用于消除浏览器的默认设置，防止不同浏览器的显示效果不同。
- 修改 body{width：100%；} 为 html{width:100%;}
原因：直接修改整体视图.
- 设置width值时，设置一个不为100%的值。（如果需要用滚动条来显示溢出的话，那么可以把overflow设置为auto或者scroll）
问题二：body的子元素height：100%,但实际高度未填满整个页面
代码：
运行结果为：div高度未填满整个页面。
原因分析
div的父级是body，浏览器默认状态下，body没有height属性。因此当我们直接设置div为height:100%;时没有效果。
只有当我们给父级body设置了100% 之后，它的子级对象div的height:100%;才可能会发生作用，这便是浏览器解析规则引发的高度自适应问题。
但仅仅修改body的height为100%（代码修改一），或者仅仅修改html的height为100%（代码修改二）都同样不起作用。为了各浏览器的兼容性，应为body与html同时设置height:100%;。
————————————————
版权声明：本文为CSDN博主「picoasis」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lamanchas/article/details/78427044
2462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
