width/height百分比设置
参考链接1:width=100%时会出现滚动条的情况
参考链接2:html,body设置高度100%和默认的滚动条
问题一: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%,但实际高度未填满整个页面
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>子元素height不能填充100%</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:100%;
height:100%;
background-color:pink;
}
</style>
</head>
<body>
<div>块</div>
</body>
</html>
运行结果为:div高度未填满整个页面。
原因分析
div的父级是body,浏览器默认状态下,body没有height属性。因此当我们直接设置div为height:100%;时没有效果。
只有当我们给父级body设置了100% 之后,它的子级对象div的height:100%;才可能会发生作用,这便是浏览器解析规则引发的高度自适应问题。
但仅仅修改body的height为100%(代码修改一),或者仅仅修改html的height为100%(代码修改二)都同样不起作用。为了各浏览器的兼容性,应为body与html同时设置height:100%;。
错误示范1:仅修改body的height
<style>
/*代码修改一*/
*{
margin:0;
padding:0;
}
body{
width:100%;
height:100;
}
div{
width:100%;
height:100%;
background-color:pink;
}
</style>
错误示范2:仅修改html的height
<style>
/*代码修改二*/
*{
margin:0;
padding:0;
}
html{
width:100%;
height:100;
}
div{
width:100%;
height:100%;
background-color:pink;
}
</style>
正确操作示范:
body对象与html对象同时相同的样式设计。
<style>
/*代码修改三:正确示范*/
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100;
}
div{
width:100%;
height:100%;
background-color:pink;
}
</style>