如何将div置于页面底部？基于现有CSS的实现方案问询

基于你现有的CSS结构，以下两种方法可以快速将.neumorphic-input容器固定到页面底部，同时保留内部元素的水平居中效果：

方案一：Flex布局（推荐，适配响应式场景） #

利用Flex布局的margin-top: auto特性，让容器自动被推到页面底部：

修改后的CSS代码：

.body {
  min-height: 100vh; /* 让body占满视口高度 */
  display: flex;
  flex-direction: column;
  margin: 0; /* 清除浏览器默认边距 */
}

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: auto; /* 关键属性：将容器推至页面底部 */
  padding: 1rem; /* 可选：添加内边距避免容器贴紧屏幕边缘 */
}

优点：无需担心容器遮挡页面内容，当页面内容超过视口高度时，容器会自然跟随到页面底部，不会固定悬浮遮挡滚动内容。

方案二：绝对定位（适合固定悬浮场景） #

通过绝对定位将容器固定在视口底部：

修改后的CSS代码：

.body {
  position: relative; /* 设置为绝对定位的参考父容器 */
  min-height: 100vh;
  margin: 0;
  padding-bottom: 6rem; /* 可选：添加底部内边距，避免页面最下方内容被容器遮挡 */
}

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem; /* 可选：添加内边距优化视觉体验 */
  background-color: #fff; /* 可选：添加背景色，避免与下方内容重叠时显示混乱 */
}

注意：如果页面内容较多，必须给body设置足够的padding-bottom，否则底部内容会被固定的输入容器遮挡。

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