如何通过HTML/CSS实现返回按钮始终固定在页面右下角且适配动态表格

实现方案 #

你可以通过CSS定位实现需求，根据你的使用场景可以选择以下两种方案：

方案1：按钮固定在浏览器视口右下角（滚动页面时始终可见）

这种方案不管表格新增多少行、用户滚动到页面哪个位置，返回按钮都会固定在屏幕右下角，随时可以点击，适合需要高频操作返回按钮的场景。
给包裹按钮的.Back容器添加如下样式即可：

.Back {
  position: fixed;
  bottom: 24px; /* 可自定义调整和底部的间距 */
  right: 24px; /* 可自定义调整和右侧的间距 */
  z-index: 999; /* 保证按钮不会被页面其他元素遮挡 */
}

方案2：按钮固定在整个页面文档的最右下角（滚动到页面最底部才可见）

这种方案按钮会跟随页面整体高度变化，始终停留在所有内容的最右下角，不会挡住中间的表格内容，适合按钮不需要随时可见的场景。
需要先给页面根节点设置相对定位和最小高度，再给.Back容器添加绝对定位：

/* 给页面最外层容器或者body设置样式 */
body {
  position: relative;
  min-height: 100vh; /* 保证页面内容不足一屏时，按钮也能停留在视口底部 */
  padding-bottom: 70px; /* 底部预留足够空间，避免按钮盖住页面底部内容 */
  box-sizing: border-box;
}

.Back {
  position: absolute;
  bottom: 24px;
  right: 24px;
}

优化建议 #

你当前按钮的样式一部分写在CSS里，一部分写在行内style属性里，建议统一整理到CSS选择器中，方便后续维护：

button[name=BackBtn] {
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  background-color: #3869d4;
}

对应的HTML可以精简成：

<div class="Back">
  <button name="BackBtn" type="button" onclick="history.back()">Πίσω</button>
</div>

内容的提问来源于stack exchange，提问作者Tinxuanna