奇怪的页脚行为答案

【问题标题】：Weird Footer Behavior奇怪的页脚行为
【发布时间】：2017-12-07 13:17:03
【问题描述】：

我对 CSS 比较陌生，所以请原谅我的奇怪失误。我将页脚定义为具有绝对位置，并且它在我网站上的所有页面中保持在底部，但只有一个页面。

...>这里的页脚表现完美，即，无论内容如何，它的位置都粘在屏幕底部。

...>然而，下面的页脚行为异常，它的位置没有粘在页面底部。

我在两个页面上使用相同的页脚类，所以我不确定这里出了什么问题，如下所述 -

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

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

此外，错误页脚下方有一个轻微的空白，我通过添加bottom:0px对其进行了更正。

谁能帮助解释为什么同一个页脚类在两个页面上的行为会不同？想法？

【问题讨论】：

如果两个页面具有相同的类，很可能不是因为类导致行为不同。您是否知道可能添加到页面中的任何其他样式会使两个页面不同？
如果您向我们展示代码，css 和 html 会更容易
很可能是您的 html 标记有问题
我最终弄清楚了，问题不在于页脚样式，而在于错误页面上的其他类。我不想回答我自己的问题，因为 aug 在上面的评论中正确指出了这一点。我该如何关闭它？

标签： css html less footer sticky-footer

【解决方案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;
}

【讨论】：