位置：固定加粗宽度：移动设备上 100%

Question

我希望网页上的标题在用户滚动时保持可见，所以我给了它 CSS

body{
width: 100%
}
#header {
position: fixed;
width: 100%
}

我遇到的问题是，在手机上，标题实际上最终的宽度大于屏幕，因此页面可以稍微向侧面滚动，这显然是不可取的。

根据 Chrome 开发者工具，标题在 375px 屏幕上的宽度为 396.5px，在 414px 屏幕上为 434px，在 768px 屏幕上为 774px。

我尝试更改宽度以继承主体和标题。我尝试删除内容，以防某些内容迫使标题溢出。这些都不起作用。获得正确宽度的唯一方法是将标题的位置更改为固定以外的任何位置，但当然它们不提供我想要的特性。

这是为什么呢？我能做些什么吗？

Answer 1

如果不设置

margin

、

padding

和

box-sizing

属性，每个元素都有自己的属性，所以这就是代码混乱的原因。 通过执行以下操作重置所有内容：

/* you can use #header to reset only your header */
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}