在 HTML
页面中，将
页脚固定在
页面底部可以使用多种方法实现。下面介绍其中的几种方法。
### 方法一：使用 CSS
使用 CSS 的 `position: fixed` 属性可以将元素固定在
页面的某个位置。将
页脚元素使用 `position: fixed` 属性，设置 `bottom: 0`，即可将
页脚固定在
页面底部。
```
<style>
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
<body>
<main>
<!--
页面内容-->
</main>
<footer>
<!--
页脚内容-->
</footer>
</body>
```
### 方法二：使用 Flexbox
使用 Flexbox 布局可以方便地将元素固定在
页面底部。将
页面内容和
页脚包裹在一个容器中，使用 `display: flex` 和 `flex-direction: column` 属性将容器变成纵向排列，然后将容器的高度设置为 `100vh`，将
页脚元素的 `margin-top` 设置为 `auto`，即可将
页脚固定在
页面底部。
```
<style>
html, body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
margin-top: auto;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
<body>
<div class="container">
<main>
<!--
页面内容-->
</main>
<footer>
<!--
页脚内容-->
</footer>
</div>
</body>
```
### 方法三：使用 Grid
使用 Grid 布局也可以将元素固定在
页面底部。将
页面内容和
页脚包裹在一个容器中，使用 `display: grid` 和 `grid-template-rows: 1fr auto` 属性将容器分成两行，第一行占据剩余的空间，第二行为自适应高度，即可将
页脚固定在
页面底部。
```
<style>
html, body {
height: 100%;
}
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
main {
/*不需要设置高度*/
}
footer {
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
<body>
<div class="container">
<main>
<!--
页面内容-->
</main>
<footer>
<!--
页脚内容-->
</footer>
</div>
</body>
```
以上是三种将
页脚固定在
页面底部的方法，可以根据实际情况选择使用。
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
