Skip to main content
adicionou 1784 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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>

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>

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>
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

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

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.

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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;
  backgroundmargin-colorbottom: green;200px;
  marginbackground-bottomimage: 200px;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>

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;
}

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

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>
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando