让页脚留在底部

Question

我浏览了整个网站，并且阅读了所有我能找到的关于页脚不起作用的问题。我已经在我的页面上实现了它们中的每一个，但我无法为我的网站获得一个单一的解决方案。我是 CSS 和 HTML 的新手，所以请多多包涵。

我有一个 Big Cartel Page，我使用的是 Sidecar 主题。我一直在玩代码，改变字体，改变图像大小，大部分只是在这里和那里添加小的调整。我想在每页底部添加一个页脚，其中包含我的联系信息（phone、电子邮件、版权等）。

我的主页和常见问题解答页面很长，我需要将页脚放在视线之外，直到用户一直滚动到文本底部为止。但我也有许多产品页面的长度各不相同，但有时很短，以至于我担心页脚会从底部爬上来。

我已经尝试了this page上的每一个答案，我很抱歉不知道如何很好地分享我所有的尝试。我已经尝试了我能找到的每个位置（固定的、静态的、相对的、绝对的），但我不知道我还应该尝试什么。他们每个人的页脚都在页面底部上方的屏幕上伸展开来。

我不知道这应该归咎于我在 Big Cartel 上使用的主题，还是我自己的代码缺陷。可能是后者。无论哪种方式，我都喜欢任何见解，因为我试验的主要来源是 link 我发布的，它是几年前的。

Answer 1

看你必须在关闭 main overlay div

之后放置 footer dive

<div class="footer">
    <p>© 2018 www.silverframesoapworks.com</p>
</div>

CSS

.footer {
    position: fixed;
    width: 100%;
    z-index: 10;
    bottom: 0;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
}

Answer 2

由于防火墙问题，我（可能还有很多其他人）无法访问您的网页。因此，如果您可以在问题可重现的地方共享最少的代码，那将是一件好事。以便所有人检查您的问题。

无论如何我都在分享一个fiddlehere.Check这是否是你正在寻找的。

html,body{
    height: 100%;
    margin: 0;
    padding: 0
}
div{
    width: 300px;
    margin: 0 auto;
    font-size: 1.5rem;
    min-height: 100%;
    padding-bottom: 30px;
    box-sizing: border-box;
}
footer{
    background: red;
    height: 30px;
    margin-top: -30px;
    width: 100%;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non velit eu lorem luctus pellentesque. Maecenas at ultrices mi, quis sollicitudin eros. Maecenas sodales ipsum ac magna accumsan, id tincidunt sem volutpat. Fusce id sodales arcu. Nam nec vulputate nulla. Curabitur blandit urna nisl, eget lacinia nisi facilisis quis. Nullam luctus condimentum mauris in ultricies. Nullam at porta sapien. Praesent eu nisl aliquet, fermentum diam vitae, rhoncus erat. Cras maximus bibendum arcu, et congue eros iaculis id. Praesent ac ipsum quis leo dignissim egestas id at eros. Donec eget ornare ex, quis porttitor libero. Nulla condimentum ante a porttitor vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque suscipit tellus vitae egestas. Vivamus sapien diam, convallis ac lorem sed, pellentesque maximus eros.</div>
<footer>footer</footer>

让页脚留在底部

Getting a footer to stay on the bottom

css

footer

bigcartel