奇怪的页脚行为

Question

我对CSS比较新，所以请原谅我的奇怪失态。我将页脚定义为具有绝对位置，并且除了我网站上的所有页面之外，它都保持在底部。

...＆gt;此处的页脚表现完美，即，无论内容如何，​​它的位置都粘在屏幕的底部。

...＆gt;然而，下面的页脚表现异常，它的位置不会粘在页面底部。

我在两个页面上都使用相同的页脚类，所以我不确定这里有什么错误，如下所述 -

.shell3-Footer {
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
max-height:40px;
width:100%;
background-color:#f5f5f5;
position:absolute; }

请注意，如果我将位置更改为fixed，那么问题只会部分解决，因为我只需要在滚动到页面底部时才能看到页脚。此外，当使用position:fixed时，我无法查看滚动条的向下箭头 - 这不是所需的行为。

此外，在错误的页脚下面有一个轻微的空白，我通过向其添加bottom:0px来更正。

有人可以帮助为什么同一个页脚在两个页面上的行为会有所不同吗？想法？

Answer 1

试试这个：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Put this class on everything that is not the footer */
.content {
  flex: 1 0 auto; 
}

.shell3-Footer {
  flex-shrink: 0; /* new stuff */
  width:100%;
  background-color:#f5f5f5;
  box-sizing: border-box;
  padding: 0.9375rem;
  border-top: 0.0625rem solid #dcdcdc;
  overflow: hidden;
}