如何创建固定或粘滞页脚并在我的网站上工作

Posted 2023-03-21

【中文标题】如何创建固定或粘滞页脚并在我的网站上工作

【英文标题】：How to create a Fixed or Sticky footer and have work on my site

【发布时间】：2016-06-18 16:11:57

【问题描述】：

我正在尝试在我们的网站上实现粘性或固定页脚。

这是一个链接，指向我试图让它工作的页面之一。

http://www.fabricatorsunlimited.com/test/quartzcare.html

当我将<div class="wrapper"> 放在</head> 之后时，它会在导航栏和轮播之后得到这个巨大的空间。

如有需要，我可以发布代码..

感谢任何帮助。

【问题讨论】：

您是否尝试从

页脚向下移动了！谢谢！有没有办法让“push”类用背景色填充页脚的空间？

我把一切都放在了答案中。

<a href="index.html"><div id="logo"><img src="img/logo.png"></a></div> - 这里的标签嵌套错误。在寻求帮助之前，请通过 W3C 验证器检查您的 HTML。

如果其中一个答案解决了您的问题，请接受。这就是你如何感谢在这里帮助你的人。

【参考方案1】：

要下移页脚：从<footer> 标记中删除 le class .line。

要“推”类用背景颜色填充页脚的空间： 将height: 100% 添加到<section> 标记和带有.push 类的div（从而删除高度：85px）。

【讨论】：

这是我对 CSS .wrapper min-height: 100%; 部分的内容。高度：自动！重要；最小高度：100%；边距：0 自动 -85px; .footer, .push 高度：100%;背景：#ffffff； clear: both; 它似乎不起作用，我再次将它上传到网络，所以更改是最新的..

尝试部分高度：100%;

【参考方案2】：

在页脚类中试试这个，它会将页脚粘在底部。

 position: fixed;
 width: 100%;
 bottom: 0;`

【参考方案3】：

您应该将页脚元素与部分分开，因为现在页脚是部分元素的子元素。如果您将元素放在外面，这将解决您的问题。

让我把你的一些代码放在这里。

<header>
....    
</header>
<section>
    <div class="line">
    <div class="margin">
    </div>
    </div>
</section>
<div class="footer">
<footer>
    <div class="box">....</div>
</footer>
</div>

更新 我从你的 html 创建了一个小的 Snippet。