My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it? 
Asked
Active
Viewed 686 times
3
Vlad Levchenko
- 301
- 3
- 11
-
Have you seen this http://stackoverflow.com/questions/20100461/jquery-position-div-fixed-at-top-on-scroll – Abhishek Dey Jul 09 '15 at 07:57
-
To dynamically do that you will need to use `javascript`. Are you using `javascript` or `jquery`? – Alberto I.N.J. Jul 09 '15 at 07:58
-
May be you need to check if the container of scroll content and the fixed div is overlapped. add some border to the div to check. – Zeal Jul 09 '15 at 08:00
-
try adding margin-bottom for body. i.e. body{ margin-bottom: height of fixed div ; }? – krozero Jul 09 '15 at 08:02
-
I can't use javascript, it's a third-party page I need to apply styles to – Vlad Levchenko Jul 09 '15 at 08:27
1 Answers
1
A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set a margin-bottom to your contents div with the same value (or a little more to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to present that.
Liglo App
- 3,719
- 4
- 30
- 54