0

Watch this element (the arrow at the bottom) MOVE away from the bottom of the page when the URL bar retracts.

GitHub Logo

The arrow has the following styling - its absolutely positioned at the bottom but when the URL bar moves its more like 10%.

element.style {
    position: absolute;
    bottom: 2%;
    left: 25%;
    right: 25%;
    text-align: center;
    z-index: 99;
}

My html and body are as below;

html,body{
    font-family: 'Schoolbell', cursive;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    color: #ffffff;
}

I've tried everything to get it to stick to the bottom of the page. But all to no avail.

I would prefer all elements to stretch to fit the page when the URL bar disappears.

I've tried to re-flow the elements to try and fix but it doesn't seem to be working.

Any other suggestions? Or do I just live with it?

My issue is that extra room taken up by the URL bar is valuable screen real estate.

Lewis Morris
  • 1,916
  • 2
  • 28
  • 39
  • Have you tried to use a fixed number of pixel instead of `bottom: 2%;` ? – Dario Jan 23 '21 at 11:58
  • Of course 10px has the same effect as %. It moves up with the URL bar – Lewis Morris Jan 23 '21 at 13:00
  • ye it's a shame on iOS this side effect not to fix. Or maybe Apple thinks this is a proper way to display full height webpages. But give a look to this fix: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ Maybe it helps you. – lortschi Jan 23 '21 at 13:14

0 Answers0