6

Tenho um layout com menu fixo a esquerda, o conteúdo da página ocupando o restante do espaço e um rodapé também fixo:

* {
  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;
}
<nav> MENU </nav>

<main> CONTEÚDO </main>

<footer> RODAPÉ </footer>

O rodapé fixo é para o efeito do texto parado ao rolar

É possível fazer (preferencialmente somente com CSS) com que o rodapé sobreponha o menu, porém apenas no final da página? assim:

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

nav {
  z-index: -1;
  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: 2;
  width: 100%;
  height: 200px;
  background-color: blue;
  position: fixed;
  bottom: 0;
}
<nav> MENU </nav>

<main> CONTEÚDO </main>

<footer> RODAPÉ </footer>

Detalhe, o menu deve ter o z-index maior que o conteúdo devido as sombras

1
  • Pronto jovem, editei minha resposta com uma solução muito mais próxima do que acho que é o que vc precisa. A ideia é deixar o menu fixo com fundo "transparente" e o elemento que está por traz roda junto com o main normalmente fazendo o mesmo efeito! Se tiver alguma dúvida me fala.
    – hugocsl
    Commented 28/09/2018 às 18:09

3 Respostas 3

4

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>

9
  • Nossa, entendeu perfeitamente, ficou demais a imagem no final do primeiro exemplo, vou tentar de noite, mas, supondo que as duas opções funcionem, qual tu acha melhor?
    – Costamilam
    Commented 28/09/2018 às 18:16
  • @GuilhermeCostamilam acho que a primeira opção vai funcionar em 90% dos casos. Mas sem ter a imagem do seu layout fica difícil saber se vai dar certo... Mas vc ainda tem a opção de colocar um Background no menu e fixa-lo para não rodar no scroll...
    – hugocsl
    Commented 28/09/2018 às 18:19
  • Se quiser dando uma olhada... costamilam.github.io/Profile
    – Costamilam
    Commented 28/09/2018 às 18:21
  • @GuilhermeCostamilam está dando erro 404
    – hugocsl
    Commented 28/09/2018 às 18:21
  • @GuilhermeCostamilam editei novamente, agora para ficar mais próximo do layout do link que vc potou. Repare na obs que deixei antes do exemplo. A opção 1 certamente é a melhor pro seu caso
    – hugocsl
    Commented 28/09/2018 às 18:33
3

Estou enviando uma opção com JS, espero que seja útil.

window.onscroll = function() {
  const scroll = document.body.scrollHeight;
  const alturaTotal = window.scrollY + window.innerHeight;
  const footer = document.querySelector("footer");

  footer.style["z-index"] = (alturaTotal >= scroll) ? "2" : "-1";
}
* {
  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;
}
<nav> MENU </nav>

<main> CONTEÚDO </main>

<footer> RODAPÉ </footer>

-1

Sem mexer muito na estrutura que você criou e alterando somente a parte do footer, você pode utilizar da seguinte forma:

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

nav {
  z-index: -1;
  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 {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
<nav> MENU </nav>
<main> CONTEÚDO </main>			
<footer> RODAPÉ </footer>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .