Skip to main content
Hosun
Hosun
Inspiring
September 17, 2019
Question

fixed footer

  • September 17, 2019
  • 5 replies
  • 1395 views

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

 

 

This topic has been closed for replies.

5 replies

O
osgood_
Brainiac
September 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.

    Hosun
    HosunAuthor
    Inspiring
    September 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

     

     

     

    O
    osgood_
    Brainiac
    September 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. 

      BenPleysier
      BenPleysier
      Adobe Expert
      September 18, 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

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Hosun
        HosunAuthor
        Inspiring
        September 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

         

         

        BenPleysier
        BenPleysier
        Adobe Expert
        September 18, 2019

        With padding:

        Padding removed:

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        BenPleysier
        BenPleysier
        Adobe Expert
        September 18, 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.

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Hosun
          HosunAuthor
          Inspiring
          September 18, 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

           

           

          BenPleysier
          BenPleysier
          Adobe Expert
          September 18, 2019
          The padding is the problem. Delete the line, refresh the browser cache and re-load the page.
          Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          BenPleysier
          BenPleysier
          Adobe Expert
          September 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.

          Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
            Hosun
            HosunAuthor
            Inspiring
            September 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

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices