fixed footer

Report · Sep 17, 2019

Hi,

Clicking the far-right icon in <header> opens Contact Me 2.

I am making a fixed footer.

Ben told me about it some time ago.

It isn't working yet.

I might miss something.

https://quizzical-elion-e6e8a2.netlify.com/

Hosun Kang

Report · Sep 17, 2019

Hi,

Clicking the far-right icon in <header> opens Contact Me 2.

I am making a fixed footer.

Ben told me about it some time ago.

It isn't working yet.

I might miss something.

https://quizzical-elion-e6e8a2.netlify.com/

Hosun Kang

Report · Sep 17, 2019

I am making a fixed footer.
Ben told me about it some time ago.

Hosun, I did not show you a 'fixed' footer, I showed a 'sticky' footer. In case of the former, the footer will always show, in case of the latter, the footer will only show when it is within the range of the viewport with the proviso that it will stick to the bottom of the page when scrolled past the height of the content or when there is not sufficient content to cover the height.

Before osgood_ or I help you further, we need to know which type of footer you want, fixed or sticky.

Ben

Report · Sep 17, 2019

Hi,

My pages have the fixed footer. (I need to manage empty space with the fixed footer.)

body {

padding-bottom: 21.33px or 26.67px;

}

footer {

position: fixed;

bottom: 0%;

width: 100%;

z-index: 1;

}

With osgood’s code, there is no padding to <body> for the alignment.

It’s the reason why I need help to get around.

I want the fixed footer as well for contact.html.

Hosun Kang

Report · Sep 17, 2019

With osgood’s code, there is no padding to <body> for the alignment.

This is not relevant for a fixed footer. If you already have padding to the body element and it works for you, then do not touch.

The style rules for a fixed footer:

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

Edit: This will give you the problem that the footer will be partly hidden on a mobile as per a previous post.

Ben

Report · Sep 17, 2019

Hi,

I see no difference with or without padding-bottom: 21.33px.

But <footer> makes a problem to vertical alignment.

I think there will be no problem without fixed footer, if the content is not too long.

https://goofy-brattain-0c8fbb.netlify.com/

Hosun Kang

Report · Sep 17, 2019

The padding is the problem. Delete the line, refresh the browser cache and re-load the page.

Ben

Report · Sep 17, 2019

I deleted padding-bottom. I see the same as before. Hosun Kang

Report · Sep 17, 2019

With padding:

Padding removed:

Ben

Report · Sep 17, 2019

With the above answer, you will notice that the box is no longer vertically centred. This is because position: fixed; takes the footer out of the natural flow of the document. For this reason, I gave you a much better solution where the natural flow was maintained, the solution: sticky footer.

Another solution is a more recent addition called posotion: sticky;. Problem with this is the browser uptake. See here https://caniuse.com/#feat=css-sticky

Ben

Report · Sep 18, 2019

Hi,

Thank you very much for your help.

I’d rather choose sticky footer of your version.

Everything looks fine.

Only issue is, when iPhone is turned to landscape, header and footer are broken.

https://jolly-elion-632cb2.netlify.com/

Hosun Kang

Report · Sep 18, 2019

If iPhone is proving this difficult to cater for I would just set the box at a percentage from the top of its parent container and move on, rather than trying to perfectly vertically center it, or just accept the iPhone presentation is a bit goofy. I don't know if there is a media query that can be specifically used to target the iPhone alone.

This feels a bit like we are back in the year 2010, where developers had no alternative but to use Conditional Comments to correct the positional failings of many IE browser verisons. I thought we had moved on but obviously not. Apple has become the new much malined Mircosoft for failing to introduce standards, which are observed by other compliant manufactures. How can it be that a decision was made to take the toolbars into consideration and make them part of the viewport, what a load of bullsh*te. ioS devices don't even yet support push-notifications, so you can see how backward thinking Apple really are. For them is more to do with aesthetics than producing anything that conforms or works correctly in accordance with standards. I mean jesus, they can't even produce a native browser that is backwards compatible with previous Os's, whereas Mozilla and Google can and do, go figure.

Report · Sep 18, 2019

Hi,

I think so. I will replace the box with a php form.

Q1.

My idea is adding margin-bottom: 18px to .test, as seen in the three white boxes.

Does it make sense?

Q2.

There is left: 0% in the yellow box.

I see no difference with or without it.

Should it be there?

https://ecstatic-cray-cf40ab.netlify.com/

Hosun Kang

Report · Sep 18, 2019

Hi Hosun, There is no need for left: 0%; in the footer css. If adding 18px bottom margin to the test container visually centers the box as you would like, then its ok to use. As Ben has previously stated by using positioned fixed on the footer that effectively removes the footer from the natural code workflow so 'main' doesn't even know it's there. Therefore your test container will sit slightly lower vertically, by adding the bottom margin it will push it up slightly to compensate for the height of the footer. It's a bit of a hit and miss approach BUT as long as the form is usable in all devices and doesnt look competely stupid sometimes its the best one can achieve.

fixed footer

Related conversations