[DaemonSic]

I am working on some project, and after testing I have noticed that if the device has virtual buttons(on-screen), then div element that is supposed to be always fixed at the bottom, is behind those buttons. Basically I have lets say 2 divs, one is 100vw 100vh, the other one is 100vw wide and has height of 60px, instead of going above(stacked) the buttons, it goes beneath those buttons and is invisible unless the user hides his virtual buttons.
Is there a way to detect if the user has virtual buttons, and then just use some JS magic, or can it be fixed with a simple CSS solution?

Here is my JS Fiddle.
https://jsfiddle.net/hc9fvdgc/

[Nachfolger]

I'm not sure that you can detect a device with "virual buttons" (whatever that may be) but you can detect a mobile device - https://stackoverflow.com/questions/6666...javascript

If it's a mobile device, why not just use an expandable sidebar instead of the toolbar? It's not going to work as well on mobile.

[DaemonSic]

I'm not sure that you can detect a device with "virual buttons" (whatever that may be) but you can detect a mobile device - https://stackoverflow.com/questions/6666...javascript

If it's a mobile device, why not just use an expandable sidebar instead of the toolbar? It's not going to work as well on mobile.

I meant virtual buttons, on-screen buttons or whatever they are called.

[Nachfolger]

I meant virtual buttons, on-screen buttons or whatever they are called.

A Keyboard?

[DaemonSic]

A Keyboard?

This.