Position fixed sidebar covered by fixed footer

I want the footer to cover the sidebar

[graeme_p]

I have a pave with a position:fixed sidebar and a position: fixed footer.

The problem is that the sidebar covers the footer. They both have z-index on them so each should start a new stacking context, and the footer comes after the sidebar. I have tried different z-index values, and placing the sidebar in the <main> element (which does cover the footer until scrolled up), but, whatever I do, the sidebar always covers the footer when it is too long (usually it will not reach the footer, but on some devices, or on pages where it contains more content, then it may).

[graeme_p]

OK, found the problem. It happens when the sidebar is inside another element. I had not understood stacking. What I really need to do now is is to either match the height of the navbar to the main element, or to place it inside and prevent it protruding. I do not think overflow: hidden works with position:fxied so I think its the former and some JS.

[not2easy]

If you place the main content container (example: div.main) and the sidebar container (example: div.sidebar) in another container (example: div.page) and use display: table for the overall container (div class="page") of the two elements (main and sidebar) and display: table-cell for the main and sidebar container, they will both have the same height. For mobile-friendly pages, you can add a breakpoint via media query to change the main container and sidebar container to display: block - as shown below, and they will display so that the sidebar on the right will display at full width, just below the main content and before the footer.

The basic code to start with would be something like this:

@media screen and (min-width: 35.5em) {
 .main{display:block;max-width: 100%;}
 .sidebar{display:block;max-width: 100%;}
}

It would need editing to fit your em base and other changes you want. The main reason for using this is to keep the content and sidebar at the same height. If you're using floats, they would not work with this type of layout. The "display: table-cell" disables floats.

I'm hoping that soon flexbox will be the ready answer for this situation, it is progressing, but not yet 'released and fully supported'.

An alternative method is described at this blog, linked to from w3c.org that explains using an aspect ratio trick to fill a container: [mademyday.de...]