页脚涵盖博客内容

Question

有人可以帮助我进行布局吗？我在博客网站上工作仅用于学习目的，但我无法解决我的问题。所以我有我使用网格布局的主要内容。我有一个索引页面，其中有一个主页面（索引页面的第二部分）和一个详细信息页面，用户可以在其中实际查看博客详细信息。我的问题是页脚涵盖了我的博客详细信息。见下图：

索引页：

博客详情：

正如你在上面的图片中看到的那样，页脚没有覆盖英雄主线。如何修复我的博客详细信息？ calc(100vh - 120px) 是英雄主页和博客详情的模板。

CSS：

/* Main */
.main {
    height: 100vh;
    /* Layout */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 120px calc(100vh - 120px) repeat(3, 1fr);
}

/* HOME SECTION */
.main .home-section {
    background-color: #fff;
    /* Layout */
    display: grid;
    grid-row: 2/3;
    grid-template-rows: 1fr;
}

.main .home-section .hero-main {
    margin: 0 100px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr;
}

/* BLOG DETAILS SECTION */
.main .blog-details-section {
    display: grid;
    grid-row: 2/3;
    grid-template-rows: 1fr;
}

/* FOOTER SECTION */
.main .footer-section {
    background-color: #383838;
    display: grid;
    grid-row: 5/6;
    grid-auto-rows: 1fr;
}