修复标头溢出父容器

Question

我有一个标头固定的网页。

从下面的代码片段中可以看到，页面不一定与视口一样宽。为了确保页眉宽度与页面其余部分保持同步（并且不会溢出），我在应用栏上使用了以下CSS：

max-width: inherit;
width: inherit;

简单的固定标头示例：

.page {
  background-color: yellow;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}

.main {
  background-color: aqua;
  padding-top: 64px;
}

.app-bar {
  background-color: red;
  height: 64px;
  max-width: inherit;
  position: fixed;
  top: 0;
  width: inherit;
}

<div class="page">
  <div class="app-bar">App bar</div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
    purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
    sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
    arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
  </div>
</div>

但是，我需要对页面结构进行一些更改，以允许使用全高固定的左侧导航抽屉。为此，我需要通过将整个内容向右移动来创建空间。

必需的固定标头功能：

.page {
  background-color: yellow;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}

.app-content {
  margin-left: 150px;
  width: calc(100% - 150px);
}

.main {
  background-color: aqua;
  padding-top: 64px;
}

.app-bar {
  background-color: red;
  height: 64px;
  max-width: inherit;
  position: fixed;
  top: 0;
  width: inherit;
}

<div class="page">
  <div class="app-content">
    <div class="app-bar">App bar</div>
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
      purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
      vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
      turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
    </div>
  </div>
</div>

如您所见，结果是app-bar不在整个宽度上同步-而是溢出page container。

如果我从应用程序内容中删除宽度，则app-bar会缩小到其内容宽度。

我要寻找的是使app-bar的宽度与app-content container相同，就像在第一段代码中一样。

任何建议都因我的想法耗尽而受到赞赏。

Answer 1

由于浏览器的兼容性，我不知道您是否可以这样做，但是我建议您使用position: sticky。

.page {
  background-color: yellow;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}

.app-content {
  margin-left: 150px;
  width: calc(100% - 150px);
  position: relative;
}

.main {
  background-color: aqua;
}

.app-bar {
  background-color: red;
  height: 64px;
  max-width: inherit;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

<div class="page">
  <div class="app-bar">App bar</div>
  <div class="app-content">
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
      purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
      vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
      turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
    </div>
  </div>
</div>

Answer 2

由于您页面的width是恒定的，因此如果我正确理解您的话，就可以只给app-bar设置width，在这种情况下是250px：

.page {
  background-color: yellow;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}

.app-content {
  margin-left: 150px;
  width: calc(100% - 150px);
}

.main {
  background-color: aqua;
  padding-top: 64px;
}

.app-bar {
  background-color: red;
  height: 64px;
  max-width: 250px;
  position: fixed;
  top: 0;
  width: inherit;
}

<div class="page">
  <div class="app-content">
    <div class="app-bar">App bar</div>
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
      purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
      vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
      turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
    </div>
  </div>
</div>