Question

我似乎无法有效控制行的高度。我为6列设置了1fr，它解决了页面高度增加时行调整大小的问题。但是现在页脚高度随着页面高度而增加。这发生在小屏幕尺寸上。宽度约400像素。我怎样才能解决这个问题？谢谢。

    /* The CDN */

    /* @import url('https://fonts.googleapis.com/css?family=Exo'); */
    html, body {
     width: 100%;
     height:100%;
    }

    @font-face {
     font-family:Exo;
     src:url(exo/Exo-Regular.ttf);
    }
    * {
     box-sizing: border-box;
     font-family:Exo;
    }

    .header {grid-area: header;}
    .main {grid-area: main;}
    .footer {grid-area: footer;}

    body {
     display: grid;
     grid-template-areas:
     'header header header header header header'
     'main main main main main main'
     'footer footer footer footer footer footer';
     grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
     margin: 0;
     text-align: center;
     grid-gap: 10px;
    }

    a {
     text-decoration: none;
     color: black;
    }

    /* header */

    header {
     grid-column: 1 / span 6;
     grid-row: 1;
     padding: 14px 16px;
     align-content: center;
     border-bottom: 1px solid black;
    } 

    h1 {
     font-size: 17px;
     font-weight: normal;
     margin: 0;
    }

    /***********************************/

    main {
     display: grid;
     grid-column: 1 / span 6;
     grid-row: 2;
     width: 100%;
     height: 100%;
    }

    .searchbar {
     grid-column: 1 / span 6;
     grid-row: 1;
     padding: 10px;
    }

    .searchinput {
     border: 1px solid black;
    }

    input.icon[type="search"] {
     width:100%;
     height:20px;
     box-sizing:border-box;
     border:2px solid #ccc;
     border: radius 4px;
     font-size:16px;
     background-color:white;
     background-image:url('/libs/fontawesome-free-5.4.1-web/svgs/solid/search.svg');
     background-size:15px 15px;
     background-position:10px center;
     background-repeat:no-repeat;
     padding:12px 20px 12px 40px;
    }

    .thestuff {
     grid-column: 2 / span 4;
     grid-row: 2;
     width: 100%;
     border: 1px solid black;
     padding: 2px 16px;
    }

    .thestuff img {
     width: 100%;
     max-width: 100%;
    }













    /* footer */

    footer {
     display:grid;  
     grid-column: 1 / span 6;
     grid-row: 3;
     align-content: center;
     height:60px;
     border-top: 1px solid black;
     bottom: 0;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Guzo Lemine</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Get the cdn of all the necessary non-local files after completion -->
    
    <!-- Font Awesome CDN -->

    <!--
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    
    -->
    
    <!-- Bootstrap CDN -->
    
    <!--
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    -->

    <!-- Libraries -->
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="libs/fontawesome-free-5.4.1-web/css/all.css" />
    
    </head>
    <body>
    <header class="header">
        <h1><a href="#">Guzo Lemine</a></h1>
    </header>

    <main class="main">
        <section class="searchbar">
        <form method="GET" action="">
            <input class="searchinput icon" type="search" name="search" placeholder="What are you looking for?">
        </form>
    </section>
        <section class="thestuff">
            <img src="img/s-l500.jpg" alt="F-150 Raptor">
        </section>
    </main>

    <footer class="footer">
        <p>&copy; 2018 Guzo Lemine. All Rights Reserved.</p>
    </footer>  
    </body>
    </html>

网格高度问题

0 个答案: