移动端页面Footer无法固定在底部的技术求助

我来帮你搞定这个移动端footer跑不到页面底部的问题！你提到只有这个页面出现异常，其他页面正常，说明问题出在这个页面的布局结构或者样式设置上，咱们一步步来修复：

问题原因分析 #

你尝试给html设置height:100%但没效果，是因为光设置html还不够——body默认不会继承这个高度，而且没有用合适的布局方式来分配页面空间，导致footer无法被“推”到视口底部。另外，页面内容如果没有撑满视口高度，footer就会跟着内容走，而不是固定在底部。

具体解决方案 #

1. 调整基础布局的高度与Flex设置 #

在你的CSS里添加以下样式，让html、body成为flex布局的基础容器：

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}

2. 让主内容区域自动填充剩余空间 #

给页面的主内容容器（也就是.container）设置flex:1，这样它会自动占据导航栏和footer之外的所有空间：

.container {
  flex: 1;
}

3. 优化Footer的固定样式 #

你的footer已经有#sticky-footer的ID，补充以下样式确保它不会被内容挤压或覆盖：

#sticky-footer {
  flex-shrink: 0;
  width: 100%;
}

4. 检查并移除潜在冲突 #

• 页面里的<div style="margin-bottom: 75px;"></div>是用来避开固定导航的，这个没问题，但如果移动端导航高度变化，可以调整这个值适配。
• 确保页面里没有其他元素设置了position:absolute且未正确控制高度，导致内容溢出视口。

修改后的完整CSS示例 #

/* 新增的基础布局样式 */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
}
#sticky-footer {
  flex-shrink: 0;
  width: 100%;
}

/* 你原有的CSS */
.map-container { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; }
.map-container iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }
.navigacija-link { color: #dcfd50 !important; font-weight: 700; font-size: larger; }
.navigacija-link:hover { color: white !important; font-weight: 700; font-size: larger; text-decoration: underline !important; }
.navigacija-podlink { color: #dcfd50 !important; font-weight: 500; font-size: large; }
.navigacija-podlink:hover { color: black !important; font-weight: 500; font-size: large; text-decoration: underline !important; }

为什么这个方法有效？ #

Flex布局会自动分配容器内元素的空间，flex:1让主内容区域填满剩余高度，flex-shrink:0确保footer不会被压缩，再配合html和body的100%高度，就能让footer始终固定在视口底部，无论内容多少都不会被覆盖。

按照这个方法修改后，你在移动端打开页面就能看到footer乖乖待在底部啦！如果还有小问题，可以检查一下移动端的媒体查询适配，或者有没有其他样式冲突~

内容的提问来源于stack exchange，提问作者Luka Otočan