html - 为什么我不能从 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>

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

我已经尝试将填充/边距设置为 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

也可以随意批评我的代码。我还在学习，我可以接受任何反馈。

标签： htmlcsscss-gridgrid-layout

Answer 1

我检查了你的片段。使用时会产生问题grid-template-rows: 1fr 1fr 1fr;。我强烈建议阅读A Complete Guide to Grid and 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; 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-containerCSS

.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进行响应式设计。使用自动前缀来支持网格布局中的大多数浏览器。

在完整页面视图中查看片段。

/* 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>