Getting a footer to stay on the bottom

Question

I've been all over this website and I've read every question about footers not working that I can find. I've implemented every one of them to my page and I can't get a single solution for my site. I'm new to CSS and HTML, so please bear with me.

I have a Big Cartel Page and I use the Sidecar theme. I have been playing with code, changing fonts, altering image sizes and mostly just adding small tweaks here and there. I would love to add a footer with my contact info (phone, email, copyright, etc) that sits at the bottom of every page.

My homepage and FAQ pages are very long, and I need the footer to sit out of sight until the user scrolls all the way past the text to the bottom. But I also have many product pages that vary in length, but are sometimes short enough that I worry about the footer creeping up from the bottom.

I have tried every answer on this page, and I'm sorry in advance for not knowing how to share all of my trials well. I have tried every position I can find (fixed, static, relative, absolute) and I don't know what else I should try. Every one of them has the footer stretched across the screen well above the bottom of the page.

I can't figure out if it's the theme I'm using on Big Cartel to blame, or my own shortcomings with code. Probably the latter. Either way, I'd love any insight, as the main source of my trials is that link I posted, and it's from several years ago.

I was adding code samples from other footer-sticking questions to the bottom of the script, and I was only getting footer bars across the middle during the preview, so I would delete the added code and try again. I haven't saved it with any of the bad footers attached, since the site is live. — Emily Latham, Feb 23 '18 at 05:38

score 1 · Accepted Answer · answered Feb 23 '18 at 05:46

1

See You have to put footer dive after closing of main overlay div

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

answered Feb 23 '18 at 05:46

Athul Nath

2,536
1
15
27

the `z-index: 10` is a little overkill – Meghan Feb 23 '18 at 05:47
@SeanDenny there z-index: 10 was needed – Athul Nath Feb 23 '18 at 05:50
I put this code in, and it's fixed on the bottom of the view, but not on the bottom of the page. I'm almost positive I'm using the wrong terms, so I hope you understand what I mean. – Emily Latham Feb 23 '18 at 05:56
@EmilyLatham have u these changes updated ur site ? – Athul Nath Feb 23 '18 at 05:57
I've also saved it as live so you can see what it is doing. – Emily Latham Feb 23 '18 at 05:58
Are u saying space below text 'footer' ? Then add .footer p {margin-bottom: 0px;} – Athul Nath Feb 23 '18 at 05:59
I would like the box that currently says "footer" to not be seen until the user scrolls to the bottom of the page. – Emily Latham Feb 23 '18 at 06:03
You need to write js/jquery for that – Athul Nath Feb 23 '18 at 06:07
Well that's not good. I'm too new to know what that means. – Emily Latham Feb 23 '18 at 06:08
Thank you for your help. I suppose a fixed will have to be the best I can do until I teach myself more. – Emily Latham Feb 23 '18 at 06:09
@EmilyLatham pls accept my answer – Athul Nath Feb 23 '18 at 06:11
you may want to also add a `html, body { min-height: 100vh; }` – Meghan Feb 23 '18 at 06:21

score 0 · Answer 2 · answered Feb 23 '18 at 05:55

Because of firewall concerns, I am(may be many others) not able to access your webpage. So it will be good if you can share a minimal code where issue is reproducible. so that all can check your issue.

Any way I am sharing a fiddle here.Check whether this is you are looking for.

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>

Oh I wish I could attach a screenshot in these comments to show what this did to the page! My font became huge, my pictures shrunk, and there's no footer to be seen. Needless to say I may have done something wrong in the copying progress. — Emily Latham, Feb 23 '18 at 06:02
Before merging it with your code, run the code in snippet or in browser and confirm whether it is something you are looking for. In case it is matching with your requirements, only copy the concept(required code only). Many of the styles(like font size) I added here are for just demo purpose and if you copy that all to your style sheet, it may badly effect your layout — Pons Purushothaman, Feb 23 '18 at 06:34

Getting a footer to stay on the bottom

2 Answers2