Question

我面临的问题是，我的页面页脚非常符合它的位置，但是当页面加载时它不会出现位置。但是，只要我重新调整浏览器窗口的大小，或者执行以下任何活动：导航到另一个页面并返回初始页面，或者甚至在我打开调试器时;页脚在最底部到达它的位置!!!

我想让它显示在底部，即使是初始加载页面也是如此。

这是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;
}

Answer 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;
}

Answer 2

尝试stickyfooter，没有html标记，css不会让我们继续下去，但粘性页脚是一个很好的解决方案，可以让你的页脚保持在页面底部

Answer 3

将此添加到您的页脚：

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

仅在初始页面加载时，页脚不会粘贴到页面底部

3 个答案: