Poniendo una respuesta, ya que mi reputación no es suficiente para comentar. Pero no mire esto como una respuesta, solo una información adicional, como yo, tuve algunos problemas con el pie de página y el posicionamiento.
Al configurar la página, para que mi pie de página permanezca siempre en la parte inferior, con posición absoluta, y contenedor / envoltorio principal con posición relativa.
Luego encontré algunos problemas con mi contenido de texto y un menú dentro del mismo contenido (parte blanca de la página entre el encabezado y el pie de página), cuando los configuré en absoluto, el pie de página ya no se mantiene abajo.
Publicar es, como usted dice, un tema complejo.
Mi solución, para el contenido que quería en la posición 'absoluta' en mi página web, y que no me dejara de lado, cuando, por ejemplo, abría un menú desplegable, era darle una posición relativa y colocarla 35em debajo de mi menú desplegable menú. (35em es la altura de mi menú desplegable, cuando está completamente extendido)
Luego, Arriba: -35em, para el contenido que antes se empujó a un lado. Y luego agregando margen inferior: -35em. De esta manera, el contenido está "debajo" de mi menú desplegable, pero visualmente está al lado de mi menú desplegable. Y el espacio en blanco debajo del pie de página, tiene un margen de solo 10em, como era antes de comenzar a jugar con esto. Entonces mi solución a esto fue así:
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;
}
Veo que su pregunta se responde bien, pero después de muchos problemas, encontré que esta es una muy buena solución, y una forma de entender mejor cómo funciona el posicionamiento. Cuando coloco el contenido de mi texto, debajo de mi menú desplegable, no funciona. No empuje mi texto a un lado. Si cambié el texto a la posición absoluta, el pie de página no se mantuvo en su lugar. Como puedo creer que este es un problema para más personas que yo, agrego esto aquí. Lo que de hecho sucede es que pongo el texto, 35ems, debajo de mi menú desplegable.
Luego, visualmente lo puse uno al lado del otro, con una posición relativa, y arriba: -35em ;, y igualando el enorme espacio de abajo, con margen: -35em;
Los valores negativos se subestiman a veces, muy buena funcionalidad, cuando uno comprende mejor estas posiciones.
Naturalmente, la posición fija también parecía lógica para mi pie de página, pero realmente quiero que el pie de página vaya debajo de la ventana gráfica, si el texto o el contenido es más largo que la ventana gráfica. Y para mantenerse en la parte inferior, si hay poco contenido en la página.
¡Este setupp lo solucionó muy bien, y recuerde usar 'em', no 'px' para un diseño de página más fluido / dinámico! :)
(Puede haber mejores soluciones, pero esto funciona para mí multiplataforma, así como dispositivos).
