Início / coding / Perguntas / 79229911
Accepted
Meek
Asked: 2024-11-27 18:44:45 +0800 CST

Como resolver problemas com estrutura HTML com expansão automática de altura de conteúdo e rodapé parallax

  • 772

Estou tentando fazer uma estrutura com uma área de conteúdo autoexpansível transbordando o rodapé para um efeito de parallax. No entanto, não consigo encontrar uma solução que funcione 100%.

Acabo tendo links não clicáveis ​​no rodapé devido min-height: 100vh;a <body>. Existe uma boa maneira de resolver isso?

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
   height: 200px;
   background-color: red;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 500px;
  margin-bottom: 550px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 550px;
}
<header>Navigation</header>
<main>Content - auto grow</main>
<footer>Footer <a href="#">Link</a></footer>

html

1 respostas

  1. Best Answer

    Você definiu z-index: -1;o rodapé.

    Definir como 0 torna o link clicável.

    body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
  z-index: 1;
  height: 50px;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  margin-bottom: 150px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
}
    <header>Navigation</header>
<main>Content - auto grow</main>
<footer>Footer <a href="#">Link</a></footer>

    • 0

relate perguntas