Html 为什么定位：固定；不使用“调整内容”：间距；？

我想创建一个基本导航栏，它始终位于页面顶部，即使在滚动时也是如此。此外，导航栏的宽度应与其显示的屏幕宽度相同

我目前的尝试是：

CSS:

HTML:

---

但我很确定我不应该这样做。谢谢你的回答！：）

添加此选项将使其具有整个页面的宽度，并使其适合页面

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  }

---

我不能百分之百肯定我理解你的问题，但是为了得到一个全宽标题，我会使用一个网格，将你的两列

1fr auto

设置为宽视图宽度

95vw以避免出现右侧滚动条

这里我有一个典型的例子，你的粘性页眉，一个占据大部分空间的主页眉，然后是底部的粘性页脚因此，我可以显示您的标题确实被卡在顶部，但不会滚动


.container{
最小高度：100vh；
显示：网格；
网格模板行：1fr自动；
}
#标题{
位置：固定；
最小宽度：95vw；
显示：网格；
网格模板列：1fr自动；
证明内容：之间的空间；
对齐项目：居中；
背景色：白色；
}
#导航列表李{
列表样式：无；
显示：内联块；
}
#收割台img{
宽度：20vw；
}
梅因先生{
背景色：#ddff；
填充：1em；
边缘顶部：3rem；
}
.页脚{
背景色：#FFDDDD；
填充：1em；
}






我饱了
我们有页脚
如果要使用位置：固定与对齐内容：之间的空格
您需要定义左侧：0和右侧：0

因此，您可以这样编写css类：

 .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color:white;
    }

此外，这些属性可能会对您有所帮助

z指数：150；在上面的图层中设置导航栏

宽度：90%；定义项目宽度的步骤

保证金：自动；要让浏览器在项目之间设置合适的间距
是否在标题中添加了宽度<编码>宽度：100vw

我认为在#页眉中添加宽度：100%可以很好地适应页面的整个宽度，在滚动后也可以保持在原来的位置，在相同的#页眉中添加top:0，我在JSFIDLE中发布了你的代码，我提出的所有这些建议都很好。添加宽度：100vw；排名：0；左：0；帮我解决了。

width: 100%;

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  }

 .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color:white;
    }