CSS中，將元素固定在頁面底部的方法通常使用CSS的position屬性來實現(xiàn)，以下是一些示例代碼，展示了如何將元素固定在頁面底部：

示例1：使用position:absolute

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

示例2：使用position:fixed

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

示例3：使用flexbox布局

.container {
  display: flex;
  min-height: 100vh; /* 視口高度 */
}
.content {
  flex-grow: 1; /* 填充剩余空間 */
}
.footer {
  height: 60px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

示例4：使用grid布局

.container {
  display: grid;
  min-height: 100vh; /* 視口高度 */
}
.content {
  grid-row: 1 / span 1; /* 填充剩余空間 */
}
.footer {
  grid-row: 2 / span 1; /* 在底部 */
  height: 60px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

選擇適合的方法

選擇哪種方法取決于你的具體需求和布局。position:absolute和position:fixed適用于簡單的頁面布局，而flexbox和grid布局則提供了更靈活的解決方案，可以在復雜的頁面設計中保持元素的底部位置。