如何基于Header外边距自动计算Container内边距？

不用手动设置固定padding，有两种靠谱的方法能让你的两列内容自动和Header对齐：

方法一：用CSS变量+calc自动计算内边距 #

这种方法能自动根据屏幕宽度和Header的max-width算出需要的内边距，适配所有屏幕尺寸：

1. 先定义一个CSS变量存储Header的最大宽度，方便统一维护
2. 给全屏的main_container设置左右内边距，用calc((100% - var(--header-max-width)) / 2)，这个值就是Header自动生成的左右外边距，直接拿来当内边距用
3. 去掉列里手动写的固定padding，只保留列之间的间距

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
  /* 定义Header最大宽度的变量 */
  --header-max-width: 1240px;
}

.main_container {
  display: flex;
  /* 自动计算左右内边距，和Header外边距一致 */
  padding-left: calc((100% - var(--header-max-width)) / 2);
  padding-right: calc((100% - var(--header-max-width)) / 2);
}

.col_left {
  width: 20%;
  background: gray;
  /* 只保留列右侧的间距 */
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.col_right {
  width: 80%;
  background: blue;
  /* 只保留列左侧的间距 */
  padding-left: 20px;
}

/** Header Menu **/
.menu_container {
  background: black;
}

header {
  display: flex;
  padding: 20px;
  background: red;
  /* 复用变量，统一值 */
  max-width: var(--header-max-width);
  margin: 0 auto;
}

ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li {
    background-color: #FF831C;
    border-bottom: 5px solid #54BAE2;
    display: block;
    margin: 2px;
    float: left;
}
ul#menu li a {
    color: #fff;
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
ul#menu li.active, ul#menu li:hover {
    background-color: #54BAE2;
    border-bottom: 5px solid #FF831C;
}

方法二：嵌套容器复用Header的居中逻辑 #

这种方法更直观，直接把两列放在一个和Header结构一样的容器里，让内容容器和Header共用居中规则：

1. 保持main_container全屏（用来承载背景色）
2. 在main_container内部新增一个inner_container，设置max-width:1240px和margin:0 auto，和Header完全一致
3. 把两列放到这个inner_container里，自动对齐Header

修改后的HTML代码 #

<div class="menu_container">
  <header>
   <ul id="menu">
      <li><a href="#">Home</a></li>
      <li class="active"><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
 </header>
</div>

<div class="main_container">
  <!-- 新增内部容器，和Header对齐 -->
  <div class="inner_container">
    <div class="col_left">
      <div>Content 1 Here</div>
      <div>Content 1 Here</div>
      <div>Content 1 Here</div>
    </div>
    <div class="col_right">
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
      <div>Content 2 Here</div>
    </div>
  </div>
</div>

修改后的CSS代码 #

body {
  margin: 0;
  padding: 0;
}

.main_container {
  /* 保持全屏背景 */
  width: 100%;
}

.inner_container {
  /* 和Header完全一致的居中规则 */
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
}

.col_left {
  width: 20%;
  background: gray;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.col_right {
  width: 80%;
  background: blue;
  padding-left: 20px;
}

/** Header Menu **/
.menu_container {
  background: black;
}

header {
  display: flex;
  padding: 20px;
  background: red;
  max-width: 1240px;
  margin: 0 auto;
}

ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li {
    background-color: #FF831C;
    border-bottom: 5px solid #54BAE2;
    display: block;
    margin: 2px;
    float: left;
}
ul#menu li a {
    color: #fff;
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
ul#menu li.active, ul#menu li:hover {
    background-color: #54BAE2;
    border-bottom: 5px solid #FF831C;
}

两种方法都能实现内容和Header自动对齐，不用手动调整padding，推荐第二种，逻辑更清晰，维护起来更方便。

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