2

Já testei nos navegadores chromium e opera, funcionou, mas no firefox e edge tem esse problema

Uso o MaterializeCSS

Tenho um elemento <main> que contém o conteúdo principal do site dividido em <article> e um elemento <footer> que contém alguns links e uma imagem. O rodapé é fixo e fica por baixo do conteúdo principal que possui uma margem inferior para que o radapé apareça no final

O código resumido:

main {
    margin-bottom: 450px !important;
    position: absolute;
    width: auto;
    min-height: 100vh !important;
    right: 0 !important;
    left: 0;
    z-index: 2;
    overflow: hidden;
    background: #fafafa;
    color: #000000;
    margin-left: 300px;
}

footer {
    background-color: #263238 !important;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    margin-bottom: 0 !important;
    padding-bottom: 0px;
    padding-top: 450px !important;
    padding-left: 300px;
    z-index: 1;
    overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Main content -->
<main>
  <p> Conteúdo Principal </p>
</main>

<!-- Contact links -->
<footer class="page-footer row">
  <p> Links </p>
</footer>

Apenas no Firefox e Edge a margem inferior não é aplicada ao elemento principal, assim o cabeçalho não aparece ao rolar a página até o final, fica sempre coberto. No código da pergunta nem aparece a barra de rolagem

Em todos os navegadores, ao inspecionar o elemento, a margem aparece no conteúdo principal, ou seja, não está sendo sobreescrita por algum outro CSS

1 Resposta 1

2

É por causa do position:absolute no <main>. Tire absolute e coloque relative e vai funcionar nos dois FF e Edge!

Resultado no FF

inserir a descrição da imagem aqui

Resultado no EDGE

inserir a descrição da imagem aqui

main {
  margin-bottom: 450px !important;
  position: relative;
  width: auto;
  min-height: 100vh !important;
  right: 0 !important;
  left: 0;
  z-index: 2;
  overflow: hidden;
  background: #fafafa;
  color: #000000;
  margin-left: 300px;
}

footer {
  background-color: #263238 !important;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  margin-bottom: 0 !important;
  padding-bottom: 0px;
  padding-top: 450px !important;
  padding-left: 300px;
  z-index: 1;
  overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Main content -->
<main>
<p> Conteúdo Principal </p>
</main>

<!-- Contact links -->
<footer class="page-footer row">
<p> Links </p>
</footer>

2
  • Tinha que ser algo muito simples mesmo. Mas é estranho os navegadores interpretar diferente essa propriedade. Valeu pela ajuda
    – Costamilam
    Commented 23/05/2019 às 19:12
  • @Costamilam eh que com absolute o escopo do elemento muda mesmo, tbm acho estranho esse comportamento. Com tão pouco código foi fácil descobrir onde era o problema rss. Aparentemente mudando para relative resolveu e não teve colaterais, mas teste em resoluções diferentes quando puder. Parabéns o site Tá ficando legal 😉
    – hugocsl
    Commented 23/05/2019 às 19:17

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 .