仅在初始页面加载时，页脚才不会粘在页面底部答案

【问题标题】：Footer is not Sticking to the Bottom of the Page only while Initial Page Loading仅在初始页面加载时，页脚才不会粘在页面底部
【发布时间】：2014-01-19 14:38:04
【问题描述】：

我面临的问题是，我的页面页脚非常位于其位置，但在第一个页面加载时它并没有出现在位置上。但是一旦我重新调整浏览器窗口的大小，或者执行任何活动，例如：导航到另一个页面并返回到初始页面，或者即使我打开调试器；页脚位于最底部的位置！！！

我想让它出现在底部，甚至在页面的初始加载时。

这里是 HTML：

<div>
  <div id="header">
  <div id="container">
  <div id="footer">
</div>

这是我包含的必要 CSS：

#header {
min-height: 75px;
}

#container {
height: 100%;
}

#footer {
clear: both;
height: 20px;
background-color: #F8F8F8;
border-top: 1px solid #DEDEDE;
color: #777777;
font-size: 11px;
padding-bottom: 4px;
padding-top: 3px;
padding-left: 10px;
}

【问题讨论】：

请提供代码，否则你的问题无用。
您还需要提供 HTML 代码和用于在页面中显示元素的任何 javascript，以及您的浏览器版本。

标签： html css loading footer

【解决方案1】：

如果没有看到您的标记，我们无法说出为什么会发生这种情况，只有我们可以建议您可以尝试

#footer {
position:absolute;
box-sizing:border-box;
left:0px;
bottom: 0px !important;
height: 30px;
width:100%;
background-color: #F8F8F8;
border-top: 1px solid #DEDEDE;
color: #777777;
font-size: 11px;
padding-bottom: 4px;
padding-top: 3px;
padding-left: 10px;
}

【讨论】：

不需要标记，因为它只是 3 个
，每个都包含以上 3 个 ID，一个 div 包含所有 3 个
。虽然这个 css 没有用！因为使用 Position 属性，我的页脚会缩小.. 如果我给出宽度：100%，它会在我的应用程序中添加一个水平滚动条。

【解决方案2】：

试试stickyfooter，如果没有 html 标记，css 不会给我们太多帮助，但粘性页脚是一个很好的解决方案，可以让页脚保持在页面底部

【讨论】：

【解决方案3】：

将此添加到您的页脚：

#footer {
    width:100%;
    position:absolute;
    bottom:0;
}

【讨论】：