Essa opção tem a estrutura do HTML um pouco diferente da sua. E o background
está na verdade na main
, feito com um linear-gradiente
para "dividir" o layout em duas colunas. Caso o conteúdo da main
não ocupe a tela inteira o footer
fica aparecendo. Mas se o conteúdo for extenso o footer
só é revelado quando acaba o conteúdo. Pra isso usei o heigth
do main
dessa forma min-height: calc(100vh - 200px);
Aqui no Snippet não fica tão legal pq o footer
tem justamente a altura do snippet, mas dificilmente vai ter uma situação que vai buggar assim, só se seu menu for muito extenso e a altura da tela muito estreita.
Para entender melhor veja o exemplo: Exiba em Tela toda para ter um melhor resultado
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>
Essa opção não depende do layout. Depende apenas que o seu menu
tenha apenas uma cor de fundo...
O macete aqui é desatachar o menu
da sua cor de fundo... Tipo assim, o menu
vai continuar fixo, mas com fundo transparente! O fundo na verdade é outra div
, essa div
por sua vez funciona como o main
e sobe no scroll. Assim o menu
sempre fica fixo, porém o "fundo todo" fica livre para subir revelando o footer
.
Porém se o scroll
da página for muito grande o fundo vai sumir por traz do menu
. Ai eu te indico a segunda opção que está logo abaixo... Mas tb tem alguma ressalvas que falarei abaixo.
OBS: Vc pode fazer a sombre com linear gradiente
no main
para fazer a "sombra" e não um drop-shadow
no menu
sobre o main
. Vc pode usar a propriedade background-attachment: fixed;
caso queira fixar o pseudo-fundo do menu
quando fizer o scroll.
Veja como fica:
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>
Opção dependendo do layout
Com CSS dependendo do design do seu layout vc pode criar um pseudo elemento que vai estar atachado no Main
e vai subi por cima do Menu
quando vc scrollar. Porém, o azul que vc vê cobrir o menu
não é o footer
, é esse elemento é o after
do main
subindo, dando a impressão que é o footer
aparecendo :)
Por isso fiz a observação dizendo que vai depender muito do design da sua página...
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>