CSS Grid实现复杂嵌套布局：解决子布局高度自适应及响应式调整

html {
    overflow: hidden; /* 防止全局滚动条出现，由内容区域内部控制 */
}

body {
    min-height: 100vh; /* 确保body至少占满整个视口高度 */
    margin: 0; /* 移除默认边距 */
    font: 16px sans-serif;
    color: white; /* 示例颜色 */
}

/* 移动设备下的主布局 */
.wrapper-mobile {
    display: grid;
    height: 100vh; /* 容器占满视口高度 */
    grid-template-rows: auto 1fr auto; /* 头部、内容区、底部 */
}

/* 辅助样式，用于示例的可视化 */
header { background-color: red; padding: .5rem 1rem; }
main { background-color: green; padding: .5rem 1rem; }
nav { background-color: purple; padding: .5rem 1rem; }
footer { background-color: blue; padding: .5rem 1rem; }

<div class="wrapper-mobile">
    <header>头部区域</header>
    <main class="content">主内容区域</main>
    <footer>底部区域</footer>
</div>

/* 确保主内容区作为Grid项时能正确收缩 */
.wrapper-mobile main {
    display: grid; /* main 自身成为一个Grid容器 */
    min-height: 0; /* 关键：允许main作为父Grid的1fr项时能正确收缩 */
    grid-template-rows: 1fr auto; /* main内部的布局：内容区1fr，操作区auto */
}

/* 确保main-inner作为Grid项时能正确收缩，并实现滚动 */
.wrapper-mobile main .main-inner {
    min-height: 0; /* 关键：允许main-inner作为父Grid的1fr项时能正确收缩 */
    overflow-y: auto; /* 仅当内容溢出时垂直滚动 */
}

/* 默认隐藏操作区，通过JS切换 */
.wrapper-mobile.no-actions main nav {
    display: none;
}

<div class="wrapper-mobile">
  <header onclick="this.parentElement.classList.toggle('no-actions')">头部区域 (点击切换操作区)</header>
  <main>
    <div class="main-inner">
      <!-- 实际的主内容，可以很长 -->
      <p>这里是主内容的段落...</p>
      <p>这里是主内容的段落...</p>
      <!-- ...更多内容... -->
    </div>
    <nav>操作区域</nav> <!-- 位于主内容下方的操作区域 -->
  </main>
  <footer>底部区域</footer>
</div>

@media (min-width: 768px) {
  .wrapper-mobile {
    grid-template-rows: auto 1fr; /* 桌面布局：只有头部和内容区 */
  }
  .wrapper-mobile footer {
    display: none; /* 桌面视图下隐藏底部 */
  }
  /* 根据需要，也可以在这里调整或隐藏操作区域 */
  /* .wrapper-mobile main nav { display: none; } */
}

/* START: 基础重置和示例辅助样式 (可根据项目需求调整) */
body {
    color: white;
    font: 16px sans-serif;
    margin: 0;
}
header { background-color: red; }
main { background-color: green; }
nav { background-color: purple; }
footer { background-color: blue; }
header, nav, footer, main .main-inner { padding: .5rem 1rem; }
main > *:first-child { margin-top: 0; }
main > *:last-child { margin-bottom: 0; }
/* END: 基础重置和示例辅助样式 */


/* START: 核心布局样式 */
html {
    overflow: hidden; /* 防止全局滚动条出现 */
}

.wrapper-mobile {
    display: grid;
    height: 100vh; /* 容器占满视口高度 */
    grid-template-rows: auto 1fr auto; /* 头部、内容区、底部 */
}

/* 关键：main作为父Grid的1fr项，自身也作为Grid容器 */
.wrapper-mobile main {
    display: grid;
    min-height: 0; /* 允许main作为Grid项时能正确收缩 */
    grid-template-rows: 1fr auto; /* main内部的布局：内容区1fr，操作区auto */
}

/* 关键：main-inner作为Grid项，允许其收缩并实现滚动 */
.wrapper-mobile main .main-inner {
    min-height: 0; /* 允许main-inner作为Grid项时能正确收缩 */
    overflow-y: auto; /* 仅当内容溢出时垂直滚动 */
}

/* 辅助类：用于通过JS切换操作区的显示/隐藏 */
.wrapper-mobile.no-actions main nav {
    display: none;
}

/* 响应式设计：桌面视图调整 */
@media (min-width: 768px) {
  .wrapper-mobile {
    grid-template-rows: auto 1fr; /* 桌面布局：只有头部和内容区 */
  }
  .wrapper-mobile footer {
    display: none; /* 桌面视图下隐藏底部 */
  }
  /* 桌面视图下，如果操作区仅为移动端设计，也可以选择隐藏 */
  /* .wrapper-mobile main nav { display: none; } */
}
/* END: 核心布局样式 */

<div class="wrapper-mobile">
  <header onclick="this.parentElement.classList.toggle('no-actions')">头部区域 (点击切换操作区)</header>
  <main>
    <div class="main-inner">
      <p>这是一个示例内容段落，用于填充主内容区域。通过CSS Grid的强大功能，我们可以轻松构建复杂的页面布局，并确保其在不同设备上都能良好地显示。嵌套Grid是处理子布局自适应高度和滚动行为的有效策略。</p>
      <p>当父容器的高度是动态分配的（例如使用 `1fr`），而子容器也需要根据其内容或特定规则来分配空间时，嵌套Grid就显得尤为重要。关键在于理解 `min-height: 0` 在Grid布局中的作用，它允许Grid项在必要时缩小到其内容的最小高度，从而避免溢出问题。</p>
      <p>移动优先的响应式设计方法，意味着我们首先为最小的屏幕尺寸（通常是移动设备）设计和实现布局，然后逐步通过媒体查询为更大的屏幕尺寸添加样式和优化。这样可以确保网站在任何设备上都能提供良好的用户体验。</p>
      <p>本教程展示了如何将一个主布局（固定头部、可滚动内容、固定底部）与一个嵌套布局（可滚动内容区域、固定操作区域）结合起来。操作区域在移动端位于主内容下方，而在桌面端可以根据需求选择隐藏或重新定位。</p>
      <p>通过合理规划Grid的行和列，并利用 `1fr` 和 `auto` 等单位，我们可以创建出高度灵活且可维护的布局。同时，`overflow-y: auto` 确保了内容在需要时可以滚动，而不会影响整体布局。</p>
      <p>请注意，示例中的 `onclick` 事件仅用于演示如何动态切换“操作区域”的可见性。在实际项目中，您会使用更健壮的JavaScript事件处理。</p>
      <p>这是一个示例内容段落，用于填充主内容区域。通过CSS Grid的强大功能，我们可以轻松构建复杂的页面布局，并确保其在不同设备上都能良好地显示。嵌套Grid是处理子布局自适应高度和滚动行为的有效策略。</p>
      <p>当父容器的高度是动态分配的（例如使用 `1fr`），而子容器也需要根据其内容或特定规则来分配空间时，嵌套Grid就显得尤为重要。关键在于理解 `min-height: 0` 在Grid布局中的作用，它允许Grid项在必要时缩小到其内容的最小高度，从而避免溢出问题。</p>
      <p>移动优先的响应式设计方法，意味着我们首先为最小的屏幕尺寸（通常是移动设备）设计和实现布局，然后逐步通过媒体查询为更大的屏幕尺寸添加样式和优化。这样可以确保网站在任何设备上都能提供良好的用户体验。</p>
      <p>本教程展示了如何将一个主布局（固定头部、可滚动内容、固定底部）与一个嵌套布局（可滚动内容区域、固定操作区域）结合起来。操作区域在移动端位于主内容下方，而在桌面端可以根据需求选择隐藏或重新定位。</p>
      <p>通过合理规划Grid的行和列，并利用 `1fr` 和 `auto` 等单位，我们可以创建出高度灵活且可维护的布局。同时，`overflow-y: auto` 确保了内容在需要时可以滚动，而不会影响整体布局。</p>
      <p>请注意，示例中的 `onclick` 事件仅用于演示如何动态切换“操作区域”的可见性。在实际项目中，您会使用更健壮的JavaScript事件处理。</p>
    </div>
    <nav>操作区域</nav>
  </main>
  <footer>底部区域</footer>
</div>