让页脚留在底部

时间:2018-02-23 05:20:27

标签: css footer bigcartel

我一直在这个网站上,我已经阅读了有关我无法找到的页脚工作的所有问题。我已将其中的每一个都实现到我的页面中,我无法为我的网站获得单一解决方案。我是CSS和HTML的新手,所以请耐心等待。

我有一个Big Cartel页面,我使用Sidecar主题。我一直在玩代码,改变字体,改变图像大小,大多只是在这里和那里添加小调整。我希望添加一个页脚,其中包含位于每个页面底部的联系信息(电话,电子邮件,版权等)。

我的主页和常见问题解答页面很长,我需要将页脚放在视线之外,直到用户从文本滚动到文本底部。但我也有很多产品页面长度各不相同,但有时足够短,我担心页脚从底部爬起来。

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

我无法弄清楚这是我在Big Cartel上使用的主题,还是我自己的代码缺点。可能是后者。无论哪种方式,我都喜欢任何洞察力,因为我的试验的主要来源是我发布的链接,而且它来自几年前。

2 个答案:

答案 0 :(得分:1)

请参阅关闭function Write-Log { param( $message, [switch] $tee ) Write-output $message | Out-content -path <LogFile> -Append if( $tee) { Write-host $Message } } div

后必须放置footer潜水
main overlay

CSS

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

答案 1 :(得分:0)

由于防火墙问题,我(可能是其他许多人)无法访问您的网页。因此,如果您可以共享问题可重现的最小代码,那将是一件好事。这样所有人都可以检查你的问题。

我在这里分享一个小提琴。检查这是否是你要找的。

&#13;
&#13;
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%;
}
&#13;
<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>
&#13;
&#13;
&#13;