This option has a slightly different HTML structure than yours. And background is actually in main, made with a linear-gradiente to "split" the layout into two columns. If the contents of main does not occupy the entire screen footer is appearing. But if the content is footer is only revealed when the content is finished. I used the heigth of main thus min-height: calc(100vh - 200px);
Here in the Snippet doesn’t look so cool footer is just the height of snippet, but will hardly have a situation that will bugging so, only if your menu is too long and the screen height is too narrow.
To better understand see the example: Show in Full Screen for a better result
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://www.placecage.com/200/200);
background-size: cover;
position: fixed;
bottom: 0;
}
main {
display: flex;
margin-bottom: 200px;
background-image: linear-gradient(to right, #ddd 0, #ddd 25%, #333 25%, #fff 26%, #fff 100%);
min-height: calc(100vh - 200px);
}
section {
margin-left: 25%;
height: 200vh;
}
nav {
width: 25%;
position: fixed;
}
<main>
<nav>
menu
</nav>
<section>
<h1>conteúdo</h1>
</section>
</main>
<footer>footer</footer>
This option does not depend on the layout. It just depends on your menu has only one background color...
The trick here is to untie the menu of your background color... like, the menu will remain fixed but with transparent background! The background is actually another div, that one div in turn works like the main and climbs into the scroll. So the menu is always fixed, but the "whole fund" is free to go up revealing the footer.
But if the scroll the page is too big the background will fade behind the menu. Then I point out the second option that is just below... But I also have some reservations that I will speak below.
OBS: You can make the shade with linear gradiente in the main to make the "shadow" and not a drop-shadow in the menu about the main. You can use the property background-attachment: fixed; if you want to fix the pseudo-fund of menu when you do the scroll.
See how it looks:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: transparent;
position: fixed;
}
.debugg {
z-index: 1;
width: 25%;
margin-left: 0;
height: 100vh;
/* background-color: red; */
margin-bottom: 200px;
float: left;
background-image: url(https://placecage.com/200/600);
background-size: cover;
background-attachment: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
margin-bottom: 200px;
background-image: linear-gradient(to right, #999 0, #ddd 16px, #ddd 100%);
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://placecage.com/500/200);
background-size: cover;
position: fixed;
bottom: 0;
}
<nav> MENU </nav>
<div class="debugg"></div>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>
Option depending on layout
With CSS depending on the design of your layout you can create a pseudo element who will be tied up in Main and go up over the Menu when you scrollar. However, the blue you see cover the menu is not the footer, is that element is the after of main rising, giving the impression that is the footer appearing :)
That’s why I made the remark saying it will depend a lot on the design of your page...
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: red;
position: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
background-color: green;
margin-bottom: 200px;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}
main::after {
content: "";
z-index: 20;
width: 25%;
height: 200px;
background-color: blue;
position: absolute;
left: 0;
top: 100%;
}
<nav> MENU </nav>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>
Okay, young man, I’ve edited my answer with a much closer solution than I think you need. The idea is to leave the fixed menu with "transparent" background and the element that is behind runs along with the main usually doing the same effect! If you have any questions, let me know.
– hugocsl