AI 助理
备案控制台
开发者社区 问答 正文

背景颜色填充屏幕宽度问题

一个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标签背景颜色没有占满屏幕宽度。

怎么解决？？

展开
收起
杨冬芳 2016-06-07 18:12:42 2000 分享 版权

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

1 条回答
写回答
取消 提交回答
  • 西秦说云
    码农|Coder| Pythonista

    h1的width:100%;是相对于其父元素body的宽度计算的，而body的width默认是当前窗口的宽度（html和body的margin，padding为0时）。所以，缩小窗口时，body的width减小，h1的width也就相应减小了。滚动条的产生是由于div的宽度较大造成的，此时的div已经突破了body的宽度范围。你可以加个body{border: 1px solid blue;}看一下实际的情况。

    2019-07-17 19:30:38
    赞同 展开评论
问答分类：
前端开发
问答地址：
开发者社区 > 开发与运维 > 问答
相关问答
颜色是什么？由什么决定呢？
332
1
0
CSS中边框设置宽度时，一般用什么作为计量单位？
2347
1
0
经过下面的设置后，文字的颜色将显示为什么颜色？
581
1
0
width()方法设置或返回元素的宽度（不包括内边距、边框或外边距），这种说法对吗？
691
1
0
布局选择flex居中，日期组件宽度不一致？
505
1
0
如何设置ImageView高度为宽度的50％
1511
2
0
css怎么设置边框内颜色设置颜色设置颜色设置
1667
1
0
羽绒服男装什么颜色
2086
1
0
图片宽度根据屏幕自适应100%，高度要一个固定值 700px
2589
1
0
怎么设置滚动条的上下边距
2839
1
0