Fixed div position on top vertical space
My situation is that I have fixed the position of the percentage-height div to the bottom of the page that sits on top of it (see picture). The problem is that when I scroll to the bottom of the page, some of its content is hidden under this div. I think I should add a blank element at the bottom of the page, but what is the best way to do this?
source to share
A good solution might be to change the height of the fixed div, which should be expressed in vh
not in %
( see ), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set margin-bottom
to your content a div with the same value (or slightly larger to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to represent this.
source to share