Make DIV to the page bottom so that it does not stay on top of absolutely positioned content?

Welcome to ScriptMode
Heisenberg
Posts: 117
Joined: Thu Aug 27, 2015 7:16 am

Make DIV to the page bottom so that it does not stay on top of absolutely positioned content?

Postby Heisenberg » Mon Mar 07, 2016 1:45 pm

I have to add a wrapper around HTML content produced by others. What I want to achieve is to add a header and footer to all the pages (height varies) produced by other people so that all new pages have a header and footer. All the pages produced by others are absolutely positioned. How can I use CSS to make my footer stay in the bottom of pages, not on top of content produced by other people?

This is the HTML structure I have. I cannot change the HTML structure or CSS of the content produced by others.

<div class="my-wrapper">
<div class="my-header">my header </div>
<div class="others-wrapper">
<div class="html-from-other-people">absolutely positioned content produced other people. I cannot touch it.
</div>
</div>
<div class="my-footer">footer goes here</div>
</div>
I cannot have sticky header or footer. The footer has to stay in the bottom of page content, not the bottom of the viewport.

Heisenberg
Posts: 117
Joined: Thu Aug 27, 2015 7:16 am

Re: Make DIV to the page bottom so that it does not stay on top of absolutely positioned content?

Postby Heisenberg » Wed Mar 09, 2016 9:39 am

check out this css :

#footer {
position: fixed;
bottom: 0;
width: 100%;
}


Return to “General”

Who is online

Users browsing this forum: No registered users and 5 guests