为什么不能从CSS网格布局中删除所有死区？

Question

    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol,
    ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* END OF CSS RESET
    *******************************************************************/

    /* font */
    @font-face {
        font-family: "parisr";
        src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
        font-style: normal;
        font-weight: 100;
    }

    body {
        font-family: "parisr", Arial, sans-serif;
    }

    html {
        background-color: #236841;
    }

    body {
        background-color: white;
    }
    /* keep the footer at bottom */
    * {
        box-sizing: border-box;
    }

    *:before,
    *:after {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
        position: relative;
    }

    .grid-container {
        min-height: 100vh;
        /* will cover the 100% of viewport */
        overflow: hidden;
        display: block;
        position: relative;
        padding-bottom: 100px;
        /* height of your footer */
    }

    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    /* margin for computer screens */
    body {
        margin-left: 150px;
        margin-right: 150px;
    }


    /* CSS Grid Layout */

    .grid-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "header""main""footer";
    }

    .header {
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: auto auto;
        grid-template-areas: "logo top-links""logo mainnav";
        grid-area: header;
    }


    .logo {
        grid-area: logo;
        margin: 25px auto auto;
    }


    .top-links {
        grid-area: top-links;
    }

    ul li {
        list-style-type: none;
        display: inline;
    }

    ul li a {
        text-decoration: none;
    }

    ul#top-links {
        text-align: right;
        padding-top: 1%;
    }

    ul#top-links li {
        padding: 14px 16px;
        color: black;
    }

    .mainnav {
        grid-area: mainnav;
    }

    /* Navigation bar across all pages*/
    .mainnav {
        background-color: #333;
        overflow: hidden;
    }

    .mainnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .mainnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .mainnav a.active {
        background-color: #4CAF50;
        color: white;
    }


    /*dropdown for the books */
    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover,
    .dropdown:hover .dropbtn {
        background-color: #236841;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* END OF HEADER CSS */

    .main {
        grid-area: main;
    }

    .footer {
        grid-area: footer;
    }

    /* home page */

    .index {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "topindex""bottomindex";
        grid-area: main;
    }

    .topindex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "video""bookmonth";
    }

    .bottomindex {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 1px 1px;
        grid-template-areas: "buybooks sellbooks valuebooks";
    }

    .video {
        grid-area: video;
        padding: 0px 25px 0px;
    }

    .bookmonth {
        grid-area: bookmonth;

        padding: 0px 25px 0px;
    }

    .buybooks {
        grid-area: buybooks;

        padding: 0px 25px 0px;
    }

    .sellbooks {
        grid-area: sellbooks;

        padding: 0px 25px 0px;
    }

    .valuebooks {
        grid-area: valuebooks;
        padding: 0px 25px 0px;
    }

    .column h4 {

    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Emblem Collectible Books</title>
    <link rel="stylesheet" href="stylesheet.css" media="all">
</head>

<body>
    <div class="grid-container">
        <header>
            <div class="header">
                <div class="logo">
                    <img src="media/emblem_logo_128.png" id="logo">
                    <p id="logotext">Emblem Rare, Collectible Books</p>
                </div>
                <div class="top-links">
                    <ul id="top-links">
                        <li><a href="contactus.html">Contact Us</a></li>
                        <li><a href="#">Accessibility</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div class="mainnav">
                    <ul id="mainnav" role="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
                            <div class="dropdown-content">
                                <a href="#">20th Century Books</a>
                                <a href="19century.html">19th Century Books</a>
                                <a href="#">18th Century Books</a>
                                <a href="#">Rare Books</a>
                            </div>
                        </li>
                        <li><a href="delivery.html">Delivery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="">Books as an Investment</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="content">
            <h1>Welcome to Emblem Collectible Books</h1>
            <div class="topindex">
                <section>
                    <div class="video">
                        <video id="homevideo" width="100%" height="100%" controls>
                            <source src="/media/emblem_video_480x360.webm" type="video/webm" />
                            <source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
                            <source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
                            <p>Sorry, your browser does not support this video.</p>
                        </video>
                    </div>
                </section>

                <section>
                    <div class="bookmonth">
                        <h4>Book of the month</h4>
                        <img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
                        <p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
                    </div>
                </section>
            </div>

            <div class="bottomindex">

                <div class="buybooks">
                    <article class="column">
                        <h4>Buying Rare Books</h4>
                        <p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
                    </article>
                </div>
                <div class="sellbooks">
                    <article class="column">
                        <h4>Selling Books</h4>
                        <p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
                    </article>
                </div>
                <div class="valuebooks">
                    <article class="column">
                        <h4>Valuing Books</h4>
                        <p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
                        <p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
                    </article>
                </div>
            </div>
        </main>
        
        
        <footer>
            <ul id="footer">
                <li><a class="url" href="#">Privacy</a></li>
                <li><a class="url" href="#">Terms and Conditions</a></li>
                <li><a class="url" href="#">Returns</a></li>
            </ul>
        </footer>
    </div>
</body>

</html>

我已经使用浏览器开发人员工具检查了该页面。好的，看起来空间来自头部设置。我没有设置任何会影响底部的属性，所以我现在真的很困惑。

我已经尝试将padding / margin设置为0，但没有任何改变。也尝试过将某些属性设置为auto无效。

任何建议将不胜感激。

这是HTML：

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Emblem Collectible Books</title>
    <link rel="stylesheet" href="stylesheet.css" media="all">
</head>

<body>
    <div class="grid-container">
        <header>
            <div class="header">
                <div class="logo">
                    <img src="media/emblem_logo_128.png" id="logo">
                    <p id="logotext">Emblem Rare, Collectible Books</p>
                </div>
                <div class="top-links">
                    <ul id="top-links">
                        <li><a href="contactus.html">Contact Us</a></li>
                        <li><a href="#">Accessibility</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div class="mainnav">
                    <ul id="mainnav" role="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
                            <div class="dropdown-content">
                                <a href="#">20th Century Books</a>
                                <a href="19century.html">19th Century Books</a>
                                <a href="#">18th Century Books</a>
                                <a href="#">Rare Books</a>
                            </div>
                        </li>
                        <li><a href="delivery.html">Delivery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="">Books as an Investment</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="content">
            <h1>Welcome to Emblem Collectible Books</h1>
            <div class="topindex">
                <section>
                    <div class="video">
                        <video id="homevideo" width="100%" height="100%" controls>
                            <source src="/media/emblem_video_480x360.webm" type="video/webm" />
                            <source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
                            <source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
                            <p>Sorry, your browser does not support this video.</p>
                        </video>
                    </div>
                </section>

                <section>
                    <div class="bookmonth">
                        <h4>Book of the month</h4>
                        <img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
                        <p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
                    </div>
                </section>
            </div>

            <div class="bottomindex">

                <div class="buybooks">
                    <article class="column">
                        <h4>Buying Rare Books</h4>
                        <p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
                    </article>
                </div>
                <div class="sellbooks">
                    <article class="column">
                        <h4>Selling Books</h4>
                        <p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
                    </article>
                </div>
                <div class="valuebooks">
                    <article class="column">
                        <h4>Valuing Books</h4>
                        <p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
                        <p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
                    </article>
                </div>
            </div>
        </main>


        <footer>
            <ul id="footer">
                <li><a class="url" href="#">Privacy</a></li>
                <li><a class="url" href="#">Terms and Conditions</a></li>
                <li><a class="url" href="#">Returns</a></li>
            </ul>
        </footer>
    </div>
</body>

</html>

这是CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END OF CSS RESET
*******************************************************************/

/* font */
@font-face {
    font-family: "parisr";
    src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
    font-style: normal;
    font-weight: 100;
}

body {
    font-family: "parisr", Arial, sans-serif;
}

html {
    background-color: #236841;
}

body {
    background-color: white;
}
/* keep the footer at bottom */
* {
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    position: relative;
}

.grid-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    /* height of your footer */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* margin for computer screens */
body {
    margin-left: 150px;
    margin-right: 150px;
}


/* CSS Grid Layout */

.grid-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "header""main""footer";
}

.header {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto;
    grid-template-areas: "logo top-links""logo mainnav";
    grid-area: header;
}


.logo {
    grid-area: logo;
    margin: 25px auto auto;
}


.top-links {
    grid-area: top-links;
}

ul li {
    list-style-type: none;
    display: inline;
}

ul li a {
    text-decoration: none;
}

ul#top-links {
    text-align: right;
    padding-top: 1%;
}

ul#top-links li {
    padding: 14px 16px;
    color: black;
}

.mainnav {
    grid-area: mainnav;
}

/* Navigation bar across all pages*/
.mainnav {
    background-color: #333;
    overflow: hidden;
}

.mainnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.mainnav a:hover {
    background-color: #ddd;
    color: black;
}

.mainnav a.active {
    background-color: #4CAF50;
    color: white;
}


/*dropdown for the books */
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: #236841;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* END OF HEADER CSS */

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

/* home page */

.index {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "topindex""bottomindex";
    grid-area: main;
}

.topindex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "video""bookmonth";
}

.bottomindex {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 1px 1px;
    grid-template-areas: "buybooks sellbooks valuebooks";
}

.video {
    grid-area: video;
    padding: 0px 25px 0px;
}

.bookmonth {
    grid-area: bookmonth;

    padding: 0px 25px 0px;
}

.buybooks {
    grid-area: buybooks;

    padding: 0px 25px 0px;
}

.sellbooks {
    grid-area: sellbooks;

    padding: 0px 25px 0px;
}

.valuebooks {
    grid-area: valuebooks;
    padding: 0px 25px 0px;
}

.column h4 {

}


/* Books */
.books {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "article1 picture1""picture2 article2""article3 picture3";
    grid-area: books;
}

.article1 {
    grid-area: article1;
}

.picture1 {
    grid-area: picture1;
}

.picture2 {
    grid-area: picture2;
}

.article2 {
    grid-area: article2;
}

.article3 {
    grid-area: article3;
}

.picture3 {
    grid-area: picture3;
}

/* Delivery  needs style*/
.delivery {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "intro""table""article";
    grid-area: delivery;
}

.intro, .table, .article {
    padding: 0% 25% 0%;
}

.intro {
    grid-area: intro;
}

.table {
    grid-area: table;
}

.article {
    grid-area: article;
}

/* Contact Us needs style */

form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: 
    "title" 
    "name"
    "email"
    "nature"
    "message"
    "submit";
    grid-gap: 0.8rem 0.5rem;
    background: #EEE;
    padding: 1rem;
    border: 2px solid #7E7E7E;
    margin-bottom: 2rem;
}

#title {
    grid-area: title;
}

#name {
    grid-area: name;
}

#email {
    grid-area: email;
}

#nature {
    grid-area: nature;
}

#message {
    grid-area: message;
}

#submit {
    grid-area: submit;
}

label {
    display: block; 
}

textarea {
    width: 100%;
    height: 8rem;
}

button {
    background: #444;
    color: #FFF;
    padding: 1rem;
}

input, select {
    width: 90%;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

fieldset {
    border: 1px solid #A8A8A8;
}

#contactform {
    margin: 0% 25% 0%;
}

/* 19th century needs images and styling*/
#19centurybooks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1px 1px;
    grid-template-areas: "article1 picture1""picture2 article2""article3 picture3""picture4 article4""article5 picture5""picture6 article6";
}

.article1 {
    grid-area: article1;
}

.article2 {
    grid-area: article2;
}

.article3 {
    grid-area: article3;
}

.article4 {
    grid-area: article4;
}

.article5 {
    grid-area: article5;
}

.article6 {
    grid-area: article6;
}

.picture1 {
    grid-area: picture1;
}

.picture2 {
    grid-area: picture2;
}

.picture3 {
    grid-area: picture3;
}

.picture4 {
    grid-area: picture4;
}

.picture5 {
    grid-area: picture5;
}

.picture6 {
    grid-area: picture6;
}


/* MEDIA QUERIES FOR SMALLER SCREEN SIZES */

@media

也可以随时批评我的代码。我仍在学习，可以提供任何反馈。

Answer 1

我检查了您的代码段。当您使用grid-template-rows: 1fr 1fr 1fr;时会产生问题。我强烈建议您阅读A Complete Guide to Grid和CSS Grid Layout。

您的父母grid CSS代码。

.grid-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    /* height of your footer */
}

.grid-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "header""main""footer";
}

grid-template-columns: auto; 自动是一个关键字，如果最大，则与最大内容相同。作为最小值，它代表占据网格轨道的网格项目的最大最小尺寸（由min-width/min-height指定）。注意：auto轨道大小（仅auto轨道大小）可以通过align-content和justify-content属性进行拉伸。

如果要为网格子元素提供全宽，请使用grid-template-columns: 1fr;。您可以使用auto，但是1fr解决方案很好。

grid-template-rows: 1fr 1fr 1fr;您为所有子元素创建相同的高度。如果您的main内容height是1000px，那么其他两个内容，例如header和footer，将是相同的height。这是您的主要问题。您必须避免不必要的空间，然后您的情况下grid-template-rows将成为auto 1fr auto。

grid-template-areas: "header""main""footer";和footer位置是绝对的，这是不正确的。您无需设置footer位置absolute。

现在是您的grid-container CSS

.grid-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    /*padding-bottom: 100px; */ /* No need this padding because grid will sent the footer in bottom of the page */
    /* height of your footer */
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* You can use auto but I prefer 1fr */
    grid-template-rows: auto 1fr auto; /* Avoid unnecessary space from header and footer */
    grid-template-areas: "header""main""footer";
}

/* No need to set footer in absolute position */

footer {
    /* position: absolute; */
    /* bottom: 0; */
    /* width: 100%; */
}

将@media用于响应式设计。使用autoprefixer支持网格布局中的大多数浏览器。

请在完整页面中查看摘要。

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol,
    ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* END OF CSS RESET
    *******************************************************************/

    /* font */
    @font-face {
        font-family: "parisr";
        src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
        font-style: normal;
        font-weight: 100;
    }

    body {
        font-family: "parisr", Arial, sans-serif;
    }

    html {
        background-color: #236841;
    }

    body {
        background-color: white;
    }
    /* keep the footer at bottom */
    * {
        box-sizing: border-box;
    }

    *:before,
    *:after {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
        position: relative;
    }

    .grid-container {
        min-height: 100vh;
        /* will cover the 100% of viewport */
        overflow: hidden;
        display: block;
        position: relative;
        /*padding-bottom: 100px;*/
        /* height of your footer */
    }

    /*footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }*/

    /* margin for computer screens */
    body {
        margin-left: 150px;
        margin-right: 150px;
    }


    /* CSS Grid Layout */

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "header""main""footer";
    }

    .header {
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: auto auto;
        grid-template-areas: "logo top-links""logo mainnav";
        grid-area: header;
    }


    .logo {
        grid-area: logo;
        margin: 25px auto auto;
    }


    .top-links {
        grid-area: top-links;
    }

    ul li {
        list-style-type: none;
        display: inline;
    }

    ul li a {
        text-decoration: none;
    }

    ul#top-links {
        text-align: right;
        padding-top: 1%;
    }

    ul#top-links li {
        padding: 14px 16px;
        color: black;
    }

    .mainnav {
        grid-area: mainnav;
    }

    /* Navigation bar across all pages*/
    .mainnav {
        background-color: #333;
        overflow: hidden;
    }

    .mainnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .mainnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .mainnav a.active {
        background-color: #4CAF50;
        color: white;
    }


    /*dropdown for the books */
    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover,
    .dropdown:hover .dropbtn {
        background-color: #236841;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* END OF HEADER CSS */

    .main {
        grid-area: main;
    }

    .footer {
        grid-area: footer;
    }

    /* home page */

    .index {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "topindex""bottomindex";
        grid-area: main;
    }

    .topindex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "video""bookmonth";
    }

    .bottomindex {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 1px 1px;
        grid-template-areas: "buybooks sellbooks valuebooks";
    }

    .video {
        grid-area: video;
        padding: 0px 25px 0px;
    }

    .bookmonth {
        grid-area: bookmonth;

        padding: 0px 25px 0px;
    }

    .buybooks {
        grid-area: buybooks;

        padding: 0px 25px 0px;
    }

    .sellbooks {
        grid-area: sellbooks;

        padding: 0px 25px 0px;
    }

    .valuebooks {
        grid-area: valuebooks;
        padding: 0px 25px 0px;
    }

    .column h4 {

    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Emblem Collectible Books</title>
    <link rel="stylesheet" href="stylesheet.css" media="all">
</head>

<body>
    <div class="grid-container">
        <header>
            <div class="header">
                <div class="logo">
                    <img src="media/emblem_logo_128.png" id="logo">
                    <p id="logotext">Emblem Rare, Collectible Books</p>
                </div>
                <div class="top-links">
                    <ul id="top-links">
                        <li><a href="contactus.html">Contact Us</a></li>
                        <li><a href="#">Accessibility</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div class="mainnav">
                    <ul id="mainnav" role="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
                            <div class="dropdown-content">
                                <a href="#">20th Century Books</a>
                                <a href="19century.html">19th Century Books</a>
                                <a href="#">18th Century Books</a>
                                <a href="#">Rare Books</a>
                            </div>
                        </li>
                        <li><a href="delivery.html">Delivery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="">Books as an Investment</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="content">
            <h1>Welcome to Emblem Collectible Books</h1>
            <div class="topindex">
                <section>
                    <div class="video">
                        <video id="homevideo" width="100%" height="100%" controls>
                            <source src="/media/emblem_video_480x360.webm" type="video/webm" />
                            <source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
                            <source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
                            <p>Sorry, your browser does not support this video.</p>
                        </video>
                    </div>
                </section>

                <section>
                    <div class="bookmonth">
                        <h4>Book of the month</h4>
                        <img src="media/heart_of_the_matter.jpg" alt="Heart of the Matter" id="bookmonthimg">
                        <p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p>
                    </div>
                </section>
            </div>

            <div class="bottomindex">

                <div class="buybooks">
                    <article class="column">
                        <h4>Buying Rare Books</h4>
                        <p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p>
                    </article>
                </div>
                <div class="sellbooks">
                    <article class="column">
                        <h4>Selling Books</h4>
                        <p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p>
                    </article>
                </div>
                <div class="valuebooks">
                    <article class="column">
                        <h4>Valuing Books</h4>
                        <p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p>
                        <p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p>
                    </article>
                </div>
            </div>
        </main>
        
        
        <footer>
            <ul id="footer">
                <li><a class="url" href="#">Privacy</a></li>
                <li><a class="url" href="#">Terms and Conditions</a></li>
                <li><a class="url" href="#">Returns</a></li>
            </ul>
        </footer>
    </div>
</body>

</html>