帮我用css实现 确定和取消按钮永远固定在底部

可以使用CSS的绝对定位（position: absolute）和bottom属性来实现确定和取消按钮永远固定在底部。

HTML代码：

<div class="container">
  <h1>标题</h1>
  <p>内容</p>
  <div class="buttons">
    <button class="cancel">取消</button>
    <button class="submit">确定</button>
  </div>
</div>

CSS代码：

.container {
  position: relative;
  min-height: 100vh; /* 设置容器最小高度为视口高度 */
}

.buttons {
  position: absolute;
  bottom: 0; /* 将按钮定位到容器底部 */
  left: 0;
  right: 0;
  padding: 20px; /* 添加一定的内边距以增加按钮的可点击区域 */
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
}

.cancel {
  background-color: #ccc;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

解释：

• 将容器（.container）的定位设为相对（position: relative），使得按钮的绝对定位相对于容器。
• 将按钮容器（.buttons）的定位设为绝对（position: absolute），并将bottom属性设为0，使其定位到容器底部。
• 设置.buttons的左右内边距（padding）以增加按钮的可点击区域。
• 使用flex布局（display: flex）和justify-content属性将确定和取消按钮分别定位到容器的左右两侧。
• 为确定和取消按钮设置样式，使其看起来像按钮，添加背景色、颜色、内边距、边框等样式