Highlighted

fixed footer

Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

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

 

Q_Dw_87_footer.png

 

TOPICS
Code

Views

310

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

fixed footer

Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

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

 

Q_Dw_87_footer.png

 

TOPICS
Code

Views

311

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 1
Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 1
Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

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

 

Q_Dw_88_footer.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

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

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

With padding:

clipboard_image_0.png

Padding removed:

clipboard_image_1.png


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 1
Engaged ,
Sep 18, 2019

Copy link to clipboard

Copied

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

 

Q_Dw_89_footer.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 0
LEGEND ,
Sep 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 1
Engaged ,
Sep 18, 2019

Copy link to clipboard

Copied

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

 

Q_Dw_90_footer.png

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 0
osgood_ LATEST
LEGEND ,
Sep 18, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 18, 2019 1