Question

I have an application a sort of a toolbar which will appear at the bottom of screen with fixed positioning. But when I scroll a page all the way down, toolbar hides some links at the footer of the page. Now I can hide that bar, but I want that even without hiding none of the client page’s link should get hidden behind toolbar.

Thus I want to attach a transparent div at the bottom of the page. I attach it just above body tag. I know it can mess with client’s page, but just wanna experiment. I attach it with this style
style='width:100%; height:190px;'. This works fine, but if I give absolute positioning to the body, it gets all messed up.

So I want to know whether there is a way to attach a div to bottom of a page regardless of positioning of the main container. Is this achievable only using css or javascript should be used?

Answer 1

You can set the bottom attribute to 0px.
Use the following style for the div.

<div style="position: absolute; bottom: 0px; height: 120px; width: 300px;background-color: blue">