0

Olá, estou com um problema simples que não consigo resolver de jeito nenhum. Tenho uma página com bastante conteúdo, mas o conteúdo fica em cima do footer ou vice-versa. Já tentei por position absolute, relative, fixed etc. O body e html estão com height 100%. Body com display flex, e flex-direction: column. Alguem para dar uma luz? A estrutura está assim: Imagem do conteudo da pagina em cima do footer

const Layout = () => {
  const isMobile = useMediaQuery({ maxWidth: 900 });

  return (
    <Fragment>
      {isMobile ? <NavbarMobile /> : <Navbar />} //header (navbar)
      <div>
        <Routers /> // conteudo da pagina
      </div>
      <footer>
        <Footer />
      </footer>  // footer
    </Fragment>
  );
};

css:

footer:
   width: "100%",
   height: "auto",
   color: "white",
   bottom: "0",

2 Respostas 2

-2

Pode colocar a div do conteúdo com um padding-bottom do tamanho do footer.

Seria mais ou menos o seguinte:

footer {
  height: 300px;
}

/* div do conteúdo */
.page-content {
  padding-bottom: 300px;
}
-2

no seu caso pode fazer assim

const Layout = () => {
  const isMobile = useMediaQuery({ maxWidth: 900 });

  return (
    <Fragment>
      {isMobile ? <NavbarMobile /> : <Navbar />} //header (navbar)
      <div className="content">
        <Routers /> // conteudo da pagina
  
        <footer>
          <Footer />
        </footer>  // footer
      </div>
    </Fragment>
  );
};

.content{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

isso garantira que seu footer sempre ficará no bottom mesmo que n haja conteúdo

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 .