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

雷雷

Answer 3

被你的問題搞糊塗了，如果你margin：0設定好的前提下。請問你是用手機做的測試嗎？放大頁面，意思是縮小視窗嗎？
首先，這個100%是根據他的父元素也就是body計算的，時間是在你的視窗第一次載入或改變視窗大小的時候，所以如果你縮小視窗(也就是你說的放大頁面)的大小使得寬度小於1000px，那麼body的寬度隨著他的父元素小於1000px，那麼h1的寬度自然也就小於1000px，出現滾動條，整個頁的寬度是最大的寬度撐起來的（你這裡是p），這時候你拉動滾動條當然會有空白~~~~
解決方法@jasonintju已經告訴你了，1.7k的前輩的建議還是要仔細看看的，作為同樣的初學者我把他們看作最偉大的資源。
如果你不想直接設定h1的min-width,那就設定一下body的min-width吧，讓他夠大（最寬的元素的寬度）這樣body的子元素就都不會出現這個問題了。