在网页设计中，常常需要将 Footer 固定在页面底部，以增加页面的美观性和可读性。在过去，实现 Footer 固定在页面底部的方法主要是通过使用固定高度的容器或者使用 JavaScript 来实现。但是，这些方法都存在一些问题，比如无法适应不同屏幕尺寸和分辨率的设备等。而使用 CSS Grid 可以更加方便、灵活地实现 Footer 固定在页面底部。
CSS Grid 简介
CSS Grid 是一种新的布局方式，它可以将一个网页分成多个区域，并且可以自由地控制这些区域的大小和位置。CSS Grid 有两个重要的概念：网格容器和网格项。
网格容器是一个元素，它包含了一个或多个网格项。可以通过将 display 属性设置为 grid 或者 inline-grid 来将一个元素设置为网格容器。
网格项是网格容器中的一个子元素，它可以占据一个或多个网格单元。可以通过将 grid-column 和 grid-row 属性设置为网格单元的起始和结束位置来控制网格项的大小和位置。
实现 Footer 固定在页面底部的方法
要实现 Footer 固定在页面底部，可以使用 CSS Grid 的 grid-template-rows 属性来设置网格容器的行高，并将最后一行的高度设置为 auto，这样最后一行就会自动填充剩余的空间，从而实现 Footer 固定在页面底部的效果。
下面是一个示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid 实现 Footer 固定在页面底部的方法</title>
<style>
body {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr 1fr auto;
min-height: 100vh;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ex in urna egestas semper. Nam euismod, libero eget vehicula fermentum, eros nulla vestibulum mauris, sed scelerisque tortor neque in odio. Sed tristique, metus eu bibendum pulvinar, leo tellus viverra erat, nec laoreet arcu quam in justo. Sed quis nunc sed metus luctus feugiat. Nulla facilisi. Praesent auctor, neque vitae suscipit hendrerit, velit velit consequat eros, nec vulputate ex sapien eget turpis. Quisque ullamcorper mi eu dolor tincidunt, in faucibus urna blandit. Donec et purus vel tortor accumsan rhoncus. In hac habitasse platea dictumst.</p>
</main>
<footer>
<h3>Footer</h3>
</footer>
</body>
</html>在这个示例代码中，我们将 body 元素设置为网格容器，并将其高度设置为 100vh，以确保网格容器占据整个屏幕。然后，我们将网格容器的行分为三个部分，其中最后一行的高度设置为 auto，以实现 Footer 固定在页面底部的效果。最后，我们在网格容器中添加 header、main 和 footer 三个网格项，并设置它们的样式。
总结
通过使用 CSS Grid，我们可以更加方便、灵活地实现 Footer 固定在页面底部的效果。在实际开发中，我们可以根据具体的需求来设置网格容器的行高和网格项的大小和位置，以实现不同的布局效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d09ded2f5e1655d7d4aa9