Rails应用使用yield时Footer无法固定在页面底部的问题

核心方案：用Flexbox布局调整页面结构 #

不用依赖min-h-screen引发的多余滚动问题，通过调整布局容器的flex属性，实现Footer在内容不足时贴紧视口底部，内容过长时自动跟随在内容末尾。

1. 调整application.html.erb的布局结构
   确保页面层级结构如下：

<body class="page-container">
  <%= render 'layouts/header' %>
  <main class="content-wrap">
    <%= yield %>
  </main>
  <%= render 'layouts/footer' %>
</body>

2. 添加全局CSS样式
   在application.css或application.scss中写入以下样式：

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 保证容器至少占满整个视口高度 */
  margin: 0;
}

.content-wrap {
  flex: 1; /* 让内容区域自动填充Header和Footer之外的剩余空间 */
}

footer {
  /* 保留你原有的Footer样式即可，无需额外设置position: fixed */
}

关键注意事项（避免多余滚动条） #

• 重置html和body的默认边距与内边距：

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 不要给Footer设置position: fixed，否则会脱离文档流，导致内容被Footer覆盖。

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