有人能告訴我為什么position:fixed會(huì)導(dǎo)致元素比瀏覽器或頁(yè)面上的其他內(nèi)容更寬并導(dǎo)致水平滾動(dòng)嗎？

這是代碼 超文本標(biāo)記語(yǔ)言

<header>
     this is a header
</header>

<div class="container">
     this is a container
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

header {
      width: 90%;
      height: 100px;
      background: blue;
      position: fixed;
      z-index: 100;
 }

.container {
     width: 90%;
     height: 500px;
     background: red;
     position: relative;
     z-index: -2;
}

這里有一個(gè)http://codepen.io/colbydodson/pen/wcgua代碼筆的鏈接

寬度以不同的方式應(yīng)用于相對(duì)元素和固定元素、祖先邊距和樣式屬性，這些元素相對(duì)于它們的位置屬性是父元素可繼承的。

body標(biāo)簽將有其默認(rèn)的用戶代理樣式表8px邊距(http://www.w3.org/TR/CSS2/sample.html)

90%寬度的標(biāo)題是固定的，沒(méi)有任何頂部、左側(cè)、右側(cè)或底部值，將被定位到最近的可用位置，但將繼承原始文檔/視窗大小，使其實(shí)際上為90%寬度，但定位在10px的“正文”邊距偏移處。 若要測(cè)試，請(qǐng)?zhí)砑觮op:0；左:0；對(duì)于固定標(biāo)題http://jsbin.com/ETAqADu/1/edit

。container是一個(gè)設(shè)置為relative position的塊級(jí)DIV元素，其寬度是可用父可用寬度的90%,即body innerWidth(不包括X軸上的10 + 10 px邊距)

不想要的結(jié)果: 邏輯上，標(biāo)題將比寬20px。容器，因?yàn)槲恢霉潭〞?huì)將元素移出體流。

修復(fù): 通過(guò)將設(shè)置為0來(lái)控制父(正文)元素的默認(rèn)邊距

body { margin: 0; }

或者一個(gè)小而重的CSS重置，比如:

/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }

另請(qǐng)參閱CSS盒模型-邊距折疊

我只在手機(jī)上遇到過(guò)類(lèi)似的問(wèn)題。盡管在任何父元素上都沒(méi)有邊距、邊框和填充，我的固定元素仍然比視口寬，并且我沒(méi)有使用width: auto的選項(xiàng)。

如果你不支持IE8及以下版本，你可以使用

width: 100vw

我可以使用視口單位:vw，vh，vmin，vmax嗎

公認(rèn)的答案是好的，但在我的情況下，我只在移動(dòng)設(shè)備上看到了比頁(yè)面其余部分更寬的固定標(biāo)題。它碰巧是由頁(yè)腳中的某個(gè)元素引起的，該元素的像素寬度(在我的例子中是750px)比瀏覽器的視窗寬。

如果您想知道頁(yè)面上的某個(gè)元素是否導(dǎo)致了這個(gè)問(wèn)題？只需打開(kāi)你的瀏覽器控制臺(tái)，并刪除一些元素進(jìn)一步下降。有時(shí)，您可能會(huì)注意到頁(yè)眉又變成了正確的寬度。您剛剛刪除的元素或其中的某個(gè)元素的寬度(以像素為單位)很可能比瀏覽器的視窗要寬。

在這種情況下，解決方案是要么將該元素設(shè)置為較小的寬度，要么使其具有靈活性。

默認(rèn)情況下，body標(biāo)簽有邊距。 在樣式表中嘗試這樣做:

body{
  margin: 0;
}

正如Salaw提到的，使用body { margin:0；}將解決問(wèn)題，因?yàn)? ltbody & gt具有默認(rèn)邊距/填充(取決于瀏覽器)。位置:固定；從文檔流中完全移除一個(gè)元素，并使其僅相對(duì)于視口，而position:relative；沒(méi)有。

鑒于這一事實(shí)，并且鑒于寬度:90%意味著“使該元素占據(jù)父元素可用空間的90%”，并且鑒于固定元素的父元素是視口，而該相對(duì)元素的父元素是具有其邊距的主體，因此存在大小差異。

參見(jiàn)http://codepen.io/anon/pen/exzpC

因?yàn)槲恢?固定表現(xiàn)為元素從文檔中分離，并放置在文檔最近的左上角，添加默認(rèn)正文的邊距。這就是為什么如果你重新設(shè)置正文頁(yè)邊空白，它將占用與你的第二個(gè)div相同的空間。