html - 固定标题溢出父容器

Question

我有一个带有固定标题的网页。

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

max-width: inherit;
width: inherit;

简单的固定 header 示例:

.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>

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

必需的固定 header 功能:

.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-content 中删除宽度，app-bar 会缩小到它的内容宽度。

我正在寻找的是使 app-bar 与 app-content container 的宽度相同，就像在第一个片段中那样。

感谢任何建议，因为我的想法已经用完了。

Answer 1

由于页面的 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>