如何将含2行6个元素的div固定在视口底部居中并随页面自适应

原有代码问题 #

• 定位规则冲突：外层容器同时使用了固定定位类和sticky定位样式，两种定位逻辑互斥，导致贴底效果不稳定
• 缺少固定定位适配的居中逻辑：固定定位元素脱离普通文档流，原有边距、伸缩属性无法实现水平居中
• 无自适应约束：表格、内部输入框未设置宽度适配规则，无法随视口尺寸自动调整大小

修正后代码 #

CSS样式 #

.bottom-fixed-container {
  /* 固定视口定位 */
  position: fixed;
  bottom: 10px;
  z-index: 1030;
  /* 水平居中 */
  left: 50%;
  transform: translateX(-50%);
  /* 自适应宽度 */
  width: 92%;
  max-width: 1140px;
}
.bottom-fixed-container table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.bottom-fixed-container th {
  padding: 8px 4px;
}
.bottom-fixed-container input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
}

HTML结构 #

<div class="bottom-fixed-container">
  <table border="1">
    <tr>
      <th><h4>Val1</h4></th>
      <th><h4>Val2</h4></th>
      <th><h4>Val3</h4></th>
      <th><h4>Val4</h4></th>
      <th><h4>Val5</h4></th>
      <th><h4>Val6</h4></th>
    </tr>
    <tr>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
      <th><input type="text" /></th>
    </tr>
  </table>
</div>

关键实现逻辑 #

• 贴底效果：直接使用position: fixed锚定视口底部，不要混用sticky定位——sticky依赖父容器的滚动边界，无法实现跨页面滚动的全局视口固定效果
• 居中适配：固定定位元素通过left: 50%配合transform: translateX(-50%)实现水平居中，不依赖额外布局容器，兼容性覆盖所有主流浏览器
• 自适应效果：外层容器设置相对视口的百分比宽度+最大宽度上限，避免超宽屏下表单过宽影响操作；表格开启table-layout: fixed自动均分6列宽度，内部输入框100%撑满单元格，随容器尺寸自动缩放
• 层级适配：z-index取值匹配Bootstrap内置固定组件层级，避免被页面其他内容遮挡

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