Html 容器div中的固定div元素

我使用bootstrap5，我想创建一个主

div.container

部分，该部分应该包括一个固定的div元素和一个附加的具有可滚动内容的div元素。如果页面被滚动，固定div元素应该是固定的，内容div应该在固定div下滚动

我不想要一个固定的导航栏（带有class

固定顶部

），因为左右两侧都没有空间。我希望在

div.container

中有固定导航栏，左右两侧都有空格

我的解决方案效果很好，只有固定div的宽度被破坏，并且宽度大于content div的宽度。请参阅

如何保持默认宽度不变？我是否应该将

div.container

部分拆分为两个单独的div部分

HTML

---

您的问题的解决方案可能是使用css限制标题的宽度，以下是一个示例：

e.header {
position: fixed;
z-index: 1000;
height: 200px;
max-width: 85%;
background-color: green;
}

.content {
top: 200px;
position: relative;
background-color: yellow;
}

---

您可以使用宽度百分比，甚至可以将其更改为px，例如“max width:1000px；”

谢谢你的帮助。现在我找到了一个适合我的解决方案。神奇的词语是粘性的：

.header {
  position: sticky;
  z-index: 1000;
  top: 0px;
  background-color: green;
}

.content {
 background-color: yellow;
}

---

请参见此处一个位置为

的元素：粘滞根据用户的滚动位置定位

.header {
  position: sticky;
  position: -webkit-sticky; /* Safari */
}

谢谢你的回答。但这对我不起作用。但我已经找到了一个解决方案，位置值为“sticky”，请参见上面的答案
.header {
  position: sticky;
  z-index: 1000;
  top: 0px;
  background-color: green;
}

.content {
 background-color: yellow;
}

.header {
  position: sticky;
  position: -webkit-sticky; /* Safari */
}