固定位置投擲我的標題居中，除非我設置標題的寬度爲100％爲什麼？

Question

比方說，我有一個頭：

header { 
    background-color: $main-background-color; 
    height: 86px; 

      #headerContent { 
       background-color: $main-background-color; 
       height:86px; 
       margin:0px auto 0px auto; 
       width: $site-width; 
      } 
} 

當標題設置用戶登錄被改爲：

header { 
    background-color: $main-background-color; 
    position:fixed; 
    width:100%; 
    height: 40px; 

     #headerContent { 
      position:relative; 
      background-color: $main-background-color; 
      width: $site-width; 
      margin:0px auto 0px auto; 
      height:40px; 
       img { 
        margin-top:12px; 
       } 
     } 

} 

我想知道的是爲什麼我所有的中心弄亂如果標題寬度設置爲自動？我只能使用％。這是使用瀏覽器來確定什麼是100％？當我使用自動標題似乎消失，我只能看到我的headercontent div然後轉移到頁面的左側。

我現在正在工作，但只想瞭解發生了什麼。

親切的問候

Answer 1

位置fixed & absolute是默認走內涵width & height。這就是爲什麼當你定義auto這是它的內容width。爲此，最好定義left & right而不是width:100%。像這樣：

header{ 
right:0; 
left:0; 
position:fixed; 
} 

Answer 2

我相信這個問題是來自position:fixed你的頭。當您修復元素時，他們會跳出正常的頁面流，並且容器將摺疊到其內容的大小。要測試，如果您刪除了position:fixed聲明，您應該看到您不需要將寬度設置爲100％。