Looking for help on a fixed footer not a sticky footer

Bootstrap Studio Help
1

Can anyone help me out on info on how to create a fixed footer at the bottom of a scrolled page instead of a sticky footer in the viewport?

2

If I think what your saying is that you want your footer to be at the bottom of your content and scroll into view when you reach the end of your content?

That's something that naturally happens if the footer is relative to the content of your body.

When you have a page that doesn't have much info in it the footer won't appear at the bottom of the browser, you'd have to set a min-height for your content to then effectively push the footer down.

For instance on your contact page. You can add a DIV with class main-content. Then drag your section element into it. Add this CSS

.main-content{
  min-height:745px;
}

On my 19 inch Desktop screen this places your copyright info about middle of the backgrounds grey bar footer area. Of course you'd want to also then make media queries for different screens/media sizes etc... so it shows like that on different screens using different min-heights to adjust it.

However, you can be tricky by hiding a sticky footer, add some padding-bottom to your content that is the amount of space the footer height and buffer space between footer and content then use some scripting to determine when the content section clears the bottom viewport and then scroll into view the footer.

Saj

3

I found a footer I think we will work, I used the bootstraps footer tags to style. It stays on the bottom on smaller screens, mobile, tablet, and on my 19" monitor, but when I view it on large screens, or shrink the browser size it floats off the bottom of the viewport.

Saj: on your 2nd suggestion is this where I would call a certain pixel height and do the exact negative number to push the footer down?

Thanks!

4

I'll have to look more into this tomorrow but I want to give a quick thing here. Regarding the shrink browser thing, if you're using the CTRL+/- this doesn't really effect pixel sizing you'd have to use either em or rem measurements. I use this tool to help figure what a certain pixel setting is and then try to make an em version of it. http://pxtoem.com/ I normally use the 3 column to figure stuff out with.

An EM measurement is based on the font-size of that elements parent element.

  • parent element with font-size:16px = 1em = 100% = 12pt
  • element with width:1em, parent element with font-size:12px, element width = 12px

A REM measurement is based on the font-size of the root element such as < HTML> element or the body might/could be either don't really remember off hand.

  • html/body with font-size:16px = 1rem = 100% = 12pt
  • element with width:1rem, parent element with font-size:12px, element width still = 16px

Try an EM or REM version of the pixel spacing that you have to see if the shrink thing works out better.

Saj

5

This is what I think you want to solve your problem.

Though it says sticky, it's not the same as what people refer to as sticky (fixed). I haven't used it yet, but I'm glad I found this and will probably use it on another project.

http://ryanfait.com/html5-sticky-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Saj

6

So I wanted to try this out and it seems to be working for your site.

I used Chrome's Developer Tools and locally edited your site (http://www.iang.design/contact.html).

I added a DIV around your SECTION element and gave it the class "wrapper".

< div class="wrapper">
    < section>....< /section>
< /div>

I added as the last element inside the wrapper DIV after the SECTION element an empty DIV with the class "push".

< div class="wrapper">
    < section>...< /section>
    < div class="push">< /div>
< /div>

I used the following CSS

html,body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -61px;
}

footer,.push {
    height: 61px;
}

section {
    margin: 0 auto 40px; //changed
    max-width: 980px;
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    background:rgba(0,0,0,0.8);
    border-radius: 15px;
    font-family: 'Raleway', sans-serif;
    top: 80px; //added
}

The footer is stuck to the bottom of your site. I don't know how this will look in the app though but the preview should work.

Saj

7

I tried it on each page and it seems that you will need to add to the "wrapper" CSS the following in order for your About and Portfolio pages to work right with it.

padding-bottom: 61px;

You should be able to make all your sites pages work with this.

Saj

8

Hi Saj...I tried your above snippets and now the footer is pushing into

<section></section>

. Am I doing something wrong?

I'm going to give your other links a go and see if I can track it from there.

Thanks!

9

I am calling a footer a little bit further down in the css.

footer { background:#333; color: #eee; font-size: 11px; padding: 20px; }

Could that be affecting the code snippet, you shared above?

10

No, I think you might have missed this part.

https://bootstrapstudio.io/forums/topic/looking-for-help-on-a-fixed-footer-not-a-sticky-footer/#post-1460

Saj

11 
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -61px;
padding-bottom: 61px;

}

I added that into the .wrapper in the css

12

Your missing the HTML for the "wrapper" and "push" DIVs.

< div class="wrapper">
    < section>...< /section>
    < div class="push">< /div>
< /div>

Of course I can only base this on what you've exported to at http://www.iang.design/contact.html

Saj

13

You need to fix the closing div for push to not have the space before the "/".

The footer element should come after the wrapper element not in it.

I think that will fix it.

Saj

14

It's all there on the contact page.

15

I am seeing your footer element coming before the push DIV. It needs to come after the wrapper DIV. If I use Chrome's Dev Tools and drag the footer element after the wrapper, it snaps to the right place on screen.

Saj

16

Holy crackers...I swear I tried it that way a bit ago and it pushed further up!

17

Hehe looks like you got it on the contact page now.

Now you just need to correct your other pages like the contact page and your golden.

Saj

18

Deployed on the portfolio page...it's working there too! Thank so much for your help!

19

Your welcome!

I'm glad you brought this up or I might have never bothered looking for something like this. I'm sure to use it in the future myself. :)

Saj

20

Glad I could help and thanks a million for helping me!

How are you on getting rid of file extensions and the .htaccess file? lol