如何实现按钮固定在视口底部且不遮挡页面内容 仅用CSS可行吗

解决方案 #

仅通过 CSS 即可实现该需求，无需引入 JavaScript，核心采用 flex 粘性页脚布局逻辑，同时调整按钮宽度适配视口即可。

修改要点 #

• 给 html 标签添加 height: 100% 声明，确保根节点高度占满视口
• 移除 .parent 原有 overflow: scroll 声明，新增 flex 相关布局属性，设置最小高度占满视口
• 给内容容器 .child 添加 flex: 1 声明，自动填充剩余高度，将按钮挤压到容器底部
• 移除按钮原有绝对定位相关属性，通过宽度计算和负边距实现按钮占满视口宽度，同时保留在正常文档流中不会遮挡内容

完整修改后代码 #

html {
  height: 100%;
}
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}
.child {
  background: lightblue;
  text-align: center;
  flex: 1;
}
.parent {
  border: 1px solid red;
  min-height: 100%;
  margin: 0 30px;
  display: flex;
  flex-direction: column;
}
button {
  border: 1px solid green;
  background: blue;
  color: white;
  width: calc(100% + 60px);
  height: 50px;
  margin-left: -30px;
}

<div class="parent">
  <div class="child">
    bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
    bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />
  </div>
  <button>button</button>
</div>

实现原理 #

1. 父容器 .parent 设置 min-height: 100%，保证视口足够大时容器高度占满整个视口，内容超出时容器高度会自动撑开
2. flex 垂直布局下 .child 设为 flex:1 会自动占据所有剩余高度，内容不足时按钮会被自动挤到父容器底部，也就是视口底部
3. 按钮通过 calc(100% + 60px) 补全父容器左右共60px的边距，再通过负左 margin 向左偏移30px，刚好占满整个视口宽度，且不会触发横向滚动条
4. 按钮保留在正常文档流中，内容高度超出视口时会跟在内容末尾，不会遮挡上层内容

内容的提问来源于stack exchange，提问作者Dashiell Rose Bark-Huss