如何删除网格布局底部的空白区域

Question

网格模板区域导致我的网站底部有一个空白区域，我尝试使用网格模板行制作 6 行，但它也不起作用。通过控制台查看，似乎也不是任何页脚元素填充/边距的错。

HTML

 body{
        display: grid;
        grid-template-areas:
            "header header"
            "headingImage headingImage"
            "container container"
            "mainContent mainContent"
            "formContainer formContainer"
            "footer footer";
        grid-template-rows: auto auto auto auto auto auto;
    }

     <div class="footerContainer">
                <div class="contact">
                    <ul>
                            <li >Contact the author:</li>
                            <li >xxxx</li>
                            <li ><a href="xxxxx">xxxxx</a></li>
                            <li >Contact: xxxxx</li>
                    </ul>
                </div>
                <div class="social">
                    <br>
                    <P>Follow us on our socials:</P>
                    <div id="socialIcon">
                        <ul>
                            <li><a href="https://www.instagram.com/"><img src="images/instagram.png" alt=""></a></li>
                            <li><a href="https://www.facebook.com/"><img src="images/facebook.png" alt=""></a></li>
                        </ul>
                        <p id="copyright"> content and photo used are strictly for educational purposes only. </p>
                    </div>
                </div>
            <button  id="backToTop"><span class="arrow up"></button>
            </div>
        </footer>
   

Answer 1

注意

grid-template-rows: auto auto auto auto auto auto;

完全无用，因为它描述了如果您根本不定义浏览器会做什么，这意味着如果您删除声明，则什么都不会改变。

另请注意，对于任何要占用网格“剩余”空间的元素，都需要使用小数单位 fr 进行定义。为了让浏览器知道这是多少 - “剩余”空间 - 网格容器需要有一个定义的 height（或至少 min-height）。

我建议你试试这个：

body { min-height: 100vh; margin: 0; grid-template-rows: repeat(4, auto) 1fr; }