Zurb Foundation For Sites 6.7.4：非粘性页脚固定视口底部需求

要实现固定在视口底部的页脚（区别于粘性页脚，无论内容多少都始终贴在视口最下方），只需调整.site-footer的CSS定位属性，并给主内容添加底部内边距避免内容被遮挡：

修改后的完整代码（CSS部分） #

.wrap{
  width: 80%;
  margin: 0 auto;
  color: white;
}

.contact {
  margin-top: 5rem;
}

.site-footer {
  background-color: #074E68;
  overflow: visible;
  padding: 2.5rem 0 2.5rem;
  /* 核心修改：切换为固定定位 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/* 新增：给主内容添加底部内边距，防止内容被页脚遮挡 */
.main-content {
  padding-bottom: 8rem; /* 数值需大于等于页脚总高度，可根据实际调整 */
}

关键说明 #

• position: fixed：让页脚脱离正常文档流，始终以浏览器视口为基准定位
• bottom: 0 + left: 0 + right: 0：确保页脚铺满视口宽度并牢牢固定在底部
• .main-content的padding-bottom：由于固定定位的元素不占用文档空间，必须给上方内容预留足够的底部空间，避免页面底部的表单内容被页脚覆盖。你可以根据页脚的实际高度（上下padding+文字高度）调整这个数值。

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