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...
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>