固定侧边栏与头部+可滚动网格主内容布局问题求助

问题场景 #

我需要实现一个包含固定头部和侧边栏的网站布局，要求header和sidebar始终固定在视口，仅主内容区的卡片网格可滚动。但给.cards-container添加place-content: center样式后，卡片会与header重叠，且主内容区无法正常滚动。

原代码 #

CSS #

:root {
    --color-primary: #202225;
    --color-secondary: #5865f2;
    --color-scheme: light;
    --body-bg: #0e1217;
    --header-nav-bg: #0e1217;
    --card-bg: #1c1f26;
    --border-color: rgba(107, 107, 107, 0.508);
}

body {
    background-color: #fff;
    min-height: 100dvh;
    font-family: "Fira Code", monospace;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main";
}

.header-nav {
    background-color: var(--header-nav-bg);
    border-block-end: 1px solid var(--border-color);
    grid-area: header;
}

.sidebar {
    background-color: var(--body-bg);
    color: var(--color-secondary);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(123, 123, 123, 0.495);
    grid-area: sidebar;
    padding-block: 1rem;
}

.main {
    grid-area: main;
}

.cards-container {
    background-color: var(--body-bg);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: 1rem;
    color: #fff;
}

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Main with sidebar | Grid</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="header-nav"></header>
    <section class="sidebar">
          
    </section>
    <main class="main">
      <div class="cards-container">
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
      </div>
    </main>
  </body>
</html>

解决步骤 #

1. 限制主内容区高度并开启滚动 #

给.main添加样式，让它的高度减去header的高度，确保不会和header重叠，同时开启垂直滚动：

.main {
  grid-area: main;
  overflow-y: auto; /* 允许垂直滚动 */
  height: calc(100dvh - 56px); /* 56px是header的高度，刚好填满剩余视口高度 */
}

2. 调整卡片容器的居中方式 #

把place-content: center换成justify-content: center，只实现卡片网格的水平居中，垂直方向保持正常文档流，避免容器整体上移导致重叠：

.cards-container {
  background-color: var(--body-bg);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
  padding-inline: 1.5rem;
  padding-block: 3rem;
  justify-content: center; /* 仅水平居中卡片网格 */
  min-height: 100%; /* 让容器占满main的高度，确保布局稳定 */
}

3. 可选：内容不足时垂直居中（按需使用） #

如果需要卡片网格在内容不足时垂直居中，同时内容超出时正常滚动，可以调整.main和.cards-container的样式：

.main {
  grid-area: main;
  overflow-y: auto;
  height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中容器 */
}

.cards-container {
  background-color: var(--body-bg);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
  padding-inline: 1.5rem;
  padding-block: 3rem;
  width: 100%; /* 保持容器宽度适配 */
  max-width: 1200px; /* 可选：限制最大宽度 */
  margin: auto 0; /* 内容不足时垂直居中 */
}

修改后的完整CSS代码 #

:root {
    --color-primary: #202225;
    --color-secondary: #5865f2;
    --color-scheme: light;
    --body-bg: #0e1217;
    --header-nav-bg: #0e1217;
    --card-bg: #1c1f26;
    --border-color: rgba(107, 107, 107, 0.508);
}

body {
    background-color: #fff;
    min-height: 100dvh;
    font-family: "Fira Code", monospace;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main";
}

.header-nav {
    background-color: var(--header-nav-bg);
    border-block-end: 1px solid var(--border-color);
    grid-area: header;
}

.sidebar {
    background-color: var(--body-bg);
    color: var(--color-secondary);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(123, 123, 123, 0.495);
    grid-area: sidebar;
    padding-block: 1rem;
}

.main {
    grid-area: main;
    overflow-y: auto;
    height: calc(100dvh - 56px);
}

.cards-container {
    background-color: var(--body-bg);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
    padding-inline: 1.5rem;
    padding-block: 3rem;
    justify-content: center;
    min-height: 100%;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: 1rem;
    color: #fff;
}

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