CSS网格子布局高度适配问题：actions区域被挤出视野求解

已定义主布局CSS：

html {
    overflow: hidden;
}

body {
    min-height: 100vh;
}

.wrapper-mobile {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
}

.wrapper-web {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr;
}

.content {
    overflow-y: auto;
}

移动端为固定header、footer搭配可滚动content区域，网页版为固定header加可滚动content，布局结构示例：

<div class="wrapper-mobile">
    <header>header area</header>
    <main class="content">main area</main>
    <section>footer area</section>
</div>

尝试在content内定义子布局，让actions区域在移动端footer上方显示，上方区域填充剩余空间，子布局CSS：

.sub-layout {
    display: grid;
    grid-template-rows: 1fr 80px;
    height: 100vh;
}

子布局结构：

<div class="sub-layout">
    <div>main</div>
    <section>actions</section>
</div>

但actions区域被挤出视野，仅能通过滚动查看，问题出在哪里？

原因与解决方案 #

核心问题 #

你给.sub-layout设置了height: 100vh，但它的父元素.content的高度是主布局grid-template-rows: auto 1fr auto里的1fr，也就是视口高度减去header和footer的实际高度。这导致.sub-layout的高度超过父元素.content的可用高度，超出部分被.content的overflow-y: auto处理成滚动区域，所以actions被挤到视野外，只能滚动查看。

修复方案 #

把.sub-layout的height: 100vh改成height: 100%，让它继承父元素.content的可用高度，这样grid布局的1fr会占满.content的剩余空间，80px的actions区域会固定在.content底部（即移动端footer上方）：

修改后的子布局CSS：

.sub-layout {
    display: grid;
    grid-template-rows: 1fr 80px;
    height: 100%;
    /* 可选：确保内容过多时1fr区域能正确滚动，避免撑破布局 */
    min-height: 0;
}

完整移动端结构示例 #

<div class="wrapper-mobile">
    <header>header area</header>
    <main class="content">
        <div class="sub-layout">
            <div>main content (可滚动)</div>
            <section>actions area (固定在content底部)</section>
        </div>
    </main>
    <section>footer area</section>
</div>

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