元素寬度：100％在屏幕外

我有一個奇怪的問題。我將我的頂層菜單設置爲width: 100%，但是在加載時，它會不在屏幕上（始終爲522px）。
元素寬度：100％在屏幕外

調試

我停止頁面加載在控制檯debugger;。元素的計算寬度爲522px。點擊，帶我到css width: 100%。除了菜單外，頁面中的所有內容都保持在頁面寬度內。

CSS

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
}

怪異的一部分
它去出界唯一同時加載。無論何時頁面加載完成，它都會達到正常全屏尺寸的100％。沒有額外的JS影響這一點。沒有CSS被加載（頁面加載暫停後）。我也從內部刪除了所有內容，在HTML和CSS中更改了ID（所以真的沒有腳本會影響它），清除緩存。仍然去怪異522px（這是從100％翻譯）。
我知道這是一個狂野的鏡頭，但沒有人有任何猜測可能導致這種情況（在所有瀏覽器上）？

來源

2016-12-05 Mikelis Baltruks

你有沒有試過這個（或者類似的）分辨率的真實設備？ – Vanojx1

@ Vanojx1是 - 同樣的問題。 –

在事實證明，我的頭（從內容單獨的文件中）曾與靜態長度（50em）和visibility:hidden這樣我看着在頁面的其他項目結束後，我找不到任何東西。
拆開所有頭文件後才注意到原因。
長話短說 - 如果width: 100%不在屏幕上，父母的尺寸正常，那麼在內容中必須有一些靜態尺寸。徹底搜索將有所幫助。

來源

2016-12-06 17:03:57

對於fixed元素，你可以使用100％的寬度

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0; 
    left: 0; 
    right: 0; /* <= */ 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
}

來源

2016-12-05 14:52:43 ixpl0

也嘗試過。沒有運氣 –

因此，這是該塊'父母 – ixpl0

中的錯誤兩個直接的父母沒有任何造型。然後body和html，都是正確的寬度爲100％。 –

left: 0和right: 0你有meta viewport在HTML中移動瀏覽器調整規模有多大？

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-12-05 15:16:43 blonfu

是的。這一切都已完成。一切運作良好。並注意只有在加載時發生overlow。 –

元素寬度：100％在屏幕外

回答

相關問題