开发者社区> 问答> 正文

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

一个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 1966 0
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
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载