Phone's on screen navigation bar hides content

user_13013042 0
Viewed 660

I'm working on a website where I implement 100vh landing screen, but bottom navigation bar (phone's navigation with home, back options) hides the bottom of my content. I'm already using JavaScript window.innerHeight to make browser take into account space taken by address bar, but this doesn't seem to take into consideration phone's on screen UI. I'll be grateful for any ideas on how to solve this issue, thanks :)

JS

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', ${vh}px);

window.addEventListener('resize', () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', ${vh}px); });

CSS height: 100vh; height: calc(var(--vh, 1vh) * 100);

As a part of design I'm implementing an animated arrow linking to the beginning of page's content.

You can check it out on http://jakubsramek.com/cs/

responsive css javascript
3 Answers

you should use since window.innerHeight change when you click or scroll

<body onresize="resizemyDiv()">

or

window.onresize = function (){
 // some code here to get window size
 // and adjust the size or your div
}
user_118762010

You can fix this just with CSS. You can use the calc function is CSS, you subtract the height of the navigation bar (let's say it's 30px) from the 100vh. Example:

 .element {
   height: calc(100vh - 30px);
 }
user_46914790

Update

Ok guys just figured it out, the issue was with my javascript file handling the vh was set to async. Thanks for help!

user_130130420
Related