Chrome Android URL Bar disrupting position of absolutely positioned element

Question

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

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.