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