页脚CSS问题

所以我有一个直截了当的页面：

<div class="page-wrapper">
    <div class="page-header">Some navigation stuff goes in here</div>
    <section class="page">The content goes here</section>
</div>

<footer class="page-footer">Guess what this is for?</footer>

为了幻想的目的。 现在，这一切都很好，但我的客户要求提供第二个页脚，但这一次它并没有出现在所有页面上，而且必须位于.page包装中。

如您所见，第二个页脚无法附着到页面底部（主页脚上方）。我试过很多东西，比如flexbox和绝对定位，但我就是不能让它工作。 有人能提供任何解决方案吗？

---

我需要再次指出，如果您需要以下顺序，我无法更改.view页脚的位置：

• 标题
• 内容
• 视图页脚
• 页脚

而且您没有需要的特定页面长度，您可以使用常规div（

display:block

）项将所有内容一个接一个地显示出来

使用块可以使每个元素获得屏幕的整个宽度，而每个元素都显示在前一个元素的下方

这是一个例子

如果您希望页脚粘贴到内容的底部（假设站点的

.page

部分需要一定的固定高度），则可以仅对页脚使用绝对定位

---

下面是一个例子：-）

我会在页脚上使用这些设置：

position: fixed;
bottom: 0px; 
left: 0px;
width: 100%;
height: 340px;

.page { margin-bottom: 340px; }

这是为了确保页脚下不能隐藏任何内容（即，可以从页脚后面向上滚动整页内容）：

---

这将包括向上滚动的第二个页脚。如果它在第一个页脚上方也需要有粘性，那么也给它一个固定的

位置，加上
底部：340px
，并相应地增加内容的底部边距。
因此，如果我做对了，你想要一个页面，如果内容比视口短，那么页脚会粘到底部。在某些页面中，您有一个额外的页脚，它必须粘贴在原始页脚的上方但是在
DOM
中，它不直接位于它前面的元素中

如果你的页脚有一个固定的高度，那么事情就不会那么艰难了。在第一步中，您必须将
.page wrapper
min height
设置为
calc（100%页脚高度）
，这意味着：

.page-wrapper {
  min-height: calc(100% - 340px);
  position: relative;
}

这就解决了粘性
.page\u footer
问题

现在，由于
.page wrapper
的底部始终接触
.page footer
的顶部，您只需将
.view footer
用
position absolute
放在底部，不幸的是，这会隐藏
.page
的内容

此时，您有两个选项，要么在
.view footer
之后添加一个附加元素作为占位符以模拟空间，要么必须向
.page
添加一个修改器类，或者添加一个父元素以添加一个等于
的
填充底部
。view footer
高度。由于您可以控制服务器端代码，我认为至少有一个选项是可能的

占位符版本：
html，
身体{
身高：100%；
}
.页眉{
颜色：白色；
背景色：#1F；
高度：75px；
}
.第页{
利润率：20px0；
背景颜色：粉红色；
}
.查看页脚{
背景色：#DCDC；
边框顶部：1px实心#adadad；
保证金：20px0-20px0；
填充：50px0；
位置：绝对位置；
宽度：100%；
底部：0；
}
.页面包装器{
最小高度：计算（100%-340px）；
位置：相对位置；
}
.页脚{
填充：0；
利润率：20px0；
边界：0；
边界半径：0；
颜色：白色；
文本对齐：居中；
背景色：#1F；
文本对齐：左对齐；
高度：340px；
}
.view页脚+.empty{
高度：120px；
}

这里有一些导航设备
内容在这里
我无法控制它在html中的显示位置
猜猜这是干什么用的？
所以只想把页脚粘到页面底部？一个叠在另一个上面？我不确定我理解你想要达到的目标。。。我试图回答这个问题，但如果我不理解你的意思，请尝试再次解释：-）这不是假设总是有第二个页脚吗？取决于：如果第二个页脚出现在.page包装器中，并且不必是粘性的，我的代码应该可以工作。如果第二个页脚也必须是粘性的，您可能需要使用一些JS/jQuery来设置.page元素/content的底部边距。您的第一个代码笔是我目前修复它的方式，但我需要它更像您的第二个代码笔，只是如果没有足够的内容，我不希望页面滚动，因此.page上的固定高度是不可行的。肯定还有另一个解决办法：）内容的固定高度是因为我不太明白你到底想达到什么目的。更多的信息将是Greatooo我喜欢它。我将测试它：）
.page-wrapper {
  min-height: calc(100% - 340px);
  position: relative;
}