Push footer to bottom (revisited)

BB Theme
1

Awhile back I asked how I could push the footer to the bottom and you suggested using the snippet below. While this does push the header to the bottom it results it does not expand my content vertically between the header and footer, so the content border does not extend to the footer. I could use “height: calc(100vh - 220px)” in the content’s class but calc() is only supported on the newest browsers.

Is there any way to expand a row vertically so the header appears at the bottom?

/* PUSH FOOTER TO BOTTOM OF PAGE WITH LIMITED CONTENT /
.fl-page {
position: relative;
min-height: 100vh;
padding-bottom: 30px; / Should be equal to the height of your footer */
}
.fl-page-footer-wrap {
width: 100%;
position: absolute;
bottom: 0px;
}

2

One more thing: even without any CSS to push the footer to the bottom, there is a 1px gap between the bottom of my content border and the top of the footer. I’ve disabled borders, margins, padding and played around with CSS inspector tools but can’t seem to remove it. Any ideas?

3

Hey Doug,

I would love to help, but could you please share your Website URL with us so we could have a better look at your issue?

Thanks!

KC

4

[Content Hidden]

5

Hey Doug,

You can get rid of the border using the CSS snippet below.

.fl-page-footer {
  border-top: none;
}

Not really sure about the first issue though. Can you elaborate? Perhaps attach screenshots?

Ben

6

Wow, thanks, that did it for the footer border.

You can see the nav border color problem here. The color is noticeably darker against the black background.

7

Hey Doug,

I just checked your site again and it seems the nav border are added as a custom style? Did you figure it out?

Ben

8

[Content Hidden]

9

Ah, so you’re referring to how the bottom red border is darker on the content area compared to outside the content area? That would be caused by the box-shadow you’ve added to the content area. The shadow is what’s causing the red to be a bit darker. Try adding a top margin to your first row and you’ll see it go away. :slight_smile:

Ben

10

That makes sense… thanks again!

11

No worries! Enjoy! :slight_smile:

Ben