元素宽度：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％翻译）。
我知道这是一个狂野的镜头，但没有人有任何猜测可能导致这种情况（在所有浏览器上）？

你有没有试过这个（或者类似的）分辨率的真实设备？ – Vanojx1

@ Vanojx1是 - 同样的问题。 –

答

在事实证明，我的头（从内容单独的文件中）曾与静态长度（50em）和visibility:hidden这样我看着在页面的其他项目结束后，我找不到任何东西。
拆开所有头文件后才注意到原因。
长话短说 - 如果width: 100%不在屏幕上，父母的尺寸正常，那么在内容中必须有一些静态尺寸。彻底搜索将有所帮助。

答

对于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; 
}

也尝试过。没有运气 –

因此，这是该块'父母 – ixpl0

中的错误两个直接的父母没有任何造型。然后body和html，都是正确的宽度为100％。 –

答

left: 0和right: 0你有meta viewport在HTML中移动浏览器调整规模有多大？

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

是的。这一切都已完成。一切运作良好。并注意只有在加载时发生overlow。 –

元素宽度：100％在屏幕外

相关推荐