Colocando uma resposta, como minha reputação não é suficiente para comentar. Mas não olhe para isso como resposta, apenas uma informação adicional, como eu, teve alguns problemas com o rodapé e o posicionamento.
Ao configurar a página, para que meu rodapé fique sempre na parte inferior, com a posição absoluta, e o contêiner / invólucro principal com a posição relativa.
Em seguida, encontrei alguns problemas com o meu conteúdo de texto e um menu dentro do mesmo conteúdo (parte branca da página entre o cabeçalho e o rodapé), ao defini-los como absolutos, o rodapé não fica mais baixo.
A publicação é, como você diz, um tema complexo.
Minha solução, para o conteúdo que eu queria na posição 'absoluta' na minha página da Web e não ser empurrada para o lado, quando, por exemplo, abrir um menu suspenso, era realmente dar uma posição relativa à publicação e colocá-la 35em abaixo da minha lista suspensa cardápio. (35em é a altura do meu menu suspenso, quando totalmente estendido)
Em seguida, em cima: -35em, para o conteúdo que antes foi empurrado para o lado. E adicionando margem inferior: -35em. Dessa forma, o conteúdo está "abaixo" do meu menu suspenso, mas visualmente fica lado a lado com o meu menu suspenso! E o espaço em branco abaixo do rodapé tem apenas 10 em margem, como era antes de começar a brincar com isso. Então, minha solução para isso foi assim:
html, body {
margin:0;
padding:0;
height:100%;
}
h1 {
margin:0;
}
#webpage {
position:relative;
min-height:100%;
margin:0;
overflow:auto;
}
#header {
height:5em;
width:100%;
padding:0;
margin:0;
}
#text {
position:relative;
margin-bottom:-32em;
padding-top:2em;
padding-right:2em;
padding-bottom:10em;
background-repeat:no-repeat;
width:70%;
padding-left:auto;
margin-left:auto;
margin-right:auto;
right:10em;
float:right;
top:-32em;
}
#dropdown {
position:absolute;
left:0;
width:20%;
clear:both;
display:block;
position:relative;
top:1em;
height:35em;
}
#footer {
position:absolute;
width:100%;
right:0;
bottom:0;
height:5em;
margin:0;
margin-top:5em;
}
Vejo que sua pergunta foi respondida corretamente, mas, depois de muitos problemas, achei uma solução muito boa e uma maneira de entender melhor como o posicionamento funciona. Quando coloco meu conteúdo de texto, abaixo do menu suspenso, ele não aparece. t empurre meu texto para o lado. Se eu alterasse o texto para a posição absoluta, o rodapé não permaneceria no lugar. Como posso acreditar que esse é um problema para mais pessoas do que eu, adiciono aqui. O que de fato acontece é que eu coloco o texto 35ems abaixo do meu menu suspenso.
Então, visualmente, coloquei-o ao lado do outro, com posição relativa e superior: -35em; e saio à noite no imenso espaço abaixo, com margem: -35em;
valores negativos são subestimados às vezes, funcionalidade muito boa, quando se entende melhor essas posições!
Naturalmente, a posição fixa também parecia lógica para o rodapé, mas eu realmente quero que o rodapé fique abaixo da janela de visualização, se o texto ou o conteúdo for maior que a janela de visualização. E para ficar na parte inferior, se houver pouco conteúdo na página.
Este setupp corrigiu isso muito bem e lembre-se de usá-los, não 'px' para um layout de página mais fluido / dinâmico! :)
(pode haver soluções melhores, mas isso funciona para mim em várias plataformas e também em dispositivos).
