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

Question

一个h1标题，设置了width:100%，缩放出现滚动条时，出现空白区域

代码如下：
css:

h1{
width:100%;
height:50px;
line-height:50px;
background-color:blue;
}

p{
  width:1000px;
  height:200px;
  border:1px solid red
}

html:

<h1>欢迎来到………………</h1>

<p></p>

如上的代码，在放大网页的时候，会出现h1标签背景颜色没有占满屏幕宽度。

怎么解决？？

Answer 1

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

Answer 2

*{
    padding:0;
    margin:0;
}

Answer 3

被你的问题搞糊涂了，如果你margin：0设置好的前提下。请问你是用手机做的测试吗？放大页面，意思是缩小窗口吗？
首先，这个100%是根据他的父元素也就是body计算的，时间是在你的窗口第一次加载或者改变窗口大小的时候，所以如果你缩小窗口(也就是你说的放大页面)的大小使得宽度小于1000px，那么body的宽度随着他的父元素小于1000px，那么h1的宽度自然也就小于1000px，出现滚动条，整个页面的宽度是最大的宽度撑起来的（你这里是p），这个时候你拉动滚动条当然会有空白~~~~
解决方法@jasonintju已经告诉你了，1.7k的前辈的建议还是要仔细看看的，作为同样的初学者我把他们看作最伟大的资源。
如果你不想直接设置h1的min-width,那就设置一下body的min-width吧，让他足够大（最宽的元素的宽度）这样body的子元素就都不会出现这个问题了。