一个h1标题,设置了width:100%,缩放出现滚动条时,出现空白区域
代码如下:
css:
h1{
width:100%;
height:50px;
line-height:50px;
background-color:blue;
}
div{
width:1000px;
height:200px;
border:1px solid red
}
html:
<h1>欢迎来到………………</h1>
<div></div>
如上的代码,在放大网页的时候,会出现h1标签背景颜色没有占满屏幕宽度。
怎么解决??
h1的width:100%;是相对于其父元素body的宽度计算的,而body的width默认是当前窗口的宽度(html和body的margin,padding为0时)。所以,缩小窗口时,body的width减小,h1的width也就相应减小了。滚动条的产生是由于div的宽度较大造成的,此时的div已经突破了body的宽度范围。你可以加个body{border: 1px solid blue;}看一下实际的情况。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。