如何让定位元素的min-width/max-width生效？解决宽度同步问题

要让蓝色元素与绿色、黄色元素保持同宽，同时满足灰色头部占满全屏、蓝色区域无灰色背景的要求，可通过以下CSS调整实现：

修改后的完整代码 #

:root {
  --header-height: 50px;
  --page-header-height: 50px;
  --sidebar-width: 100px;
  --content-width-min: 400px;
  --content-width-max: 500px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header,
#sidebar {
  position: fixed;
  top: 0;
  left: 0
}

/* 灰色头部占满全屏 */
header {
  width: 100%;
  height: var(--header-height);
  background: gray;
  position: relative; /* 作为绝对定位元素的参考容器 */
}

header,
main {
  padding-left: var(--sidebar-width);
}

#header {
  height: 100%;
  background: green;
  margin: 0 auto; /* 自动居中，同时遵守min/max-width */
}

#page_header {
  position: absolute;
  top: var(--header-height); /* 定位在绿色头部下方 */
  left: var(--sidebar-width); /* 对齐sidebar右侧 */
  right: 0; /* 对齐窗口右侧 */
  height: var(--page-header-height);
  background: blue;
}

#page_header_content {
  max-width: var(--content-width-max);
  min-width: var(--content-width-min);
  margin: 0 auto; /* 与绿色头部、黄色内容保持同宽 */
  height: 100%; /* 充满蓝色头部高度 */
}

#sidebar {
  width: var(--sidebar-width);
  min-height: 100%;
  background: red;
}

#content {
  background: yellow;
  max-width: var(--content-width-max);
  min-width: var(--content-width-min);
  margin: 0 auto; /* 与头部元素对齐 */
}

main {
  padding-top: calc(var(--header-height) + var(--page-header-height));
}

<header>
  <div id="header">
    main header
    <div style="text-align:right">right-aligned</div>
  </div>
  <div id="page_header">
    <div id="page_header_content">
      page header
      <div style="text-align:right">right-aligned</div>
    </div>
  </div>
</header>
<div id="sidebar">
  sidebar
</div>
<main>
  <div id="content">
    content
    <div style="text-align:right">right-aligned</div>
  </div>
</main>

关键修改说明 #

• 给header添加position: relative，让绝对定位的#page_header以它为参考容器
• 给#header设置margin: 0 auto，实现自动居中并遵守min-width/max-width约束
• 调整#page_header的定位参数：top: var(--header-height)让它位于绿色头部下方，left: var(--sidebar-width)和right: 0确保它的横向范围与灰色头部的内容区域（扣除侧边栏）一致
• 给#page_header_content和#content添加margin: 0 auto，让它们与绿色头部保持同宽，同步窗口宽度变化
• 给#page_header_content设置height: 100%，让内容充满蓝色头部高度

内容的提问来源于stack exchange，提问作者clarkk