texto - ¿Cómo pegar un pie de página al fondo en CSS?
personalizar widgets wordpress (9)
Tengo el problema clásico para el posicionamiento de un pie de página en la parte inferior del navegador. Probé métodos que incluyen http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ pero no obtuve buenos resultados: mi pie de página siempre aparece en el medio de la ventana del navegador tanto en FF como en ES DECIR.
En el HTML obtuve esta estructura simple
<form>
...
<div class=Main />
<div id=Footer />
</form>
Aquí está el código CSS que es relevante para el problema del pie de página css:
*
{
margin: 0;
}
html, body
{
height: 100%;
}
#Footer
{
background-color: #004669;
font-family: Tahoma, Arial;
font-size: 0.7em;
color: White;
position: relative;
height: 4em;
}
.Main
{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
/*top: 50px;*/
margin: 0 25% -4em 25%;
font-family: Verdana, Arial, Tahoma, Times New Roman;
font-size: 0.8em;
word-spacing: 1px;
line-height: 170%;
/*padding-bottom: 40px;*/
}
¿Dónde estoy haciendo mal? Realmente lo he intentado todo. Si pierdo alguna información útil, por favor avíseme.
Gracias por cualquier sugerencia por adelantado.
Saludos,
Gracias a todos por sus respuestas o comentarios. funcionó con:
position:absolute;
width:100%;
bottom:0px;
posición de configuración: no funcionó fijo en IE por alguna razón (Todavía mostró pie de página en el medio del navegador), solo funcionó para FF.
Creo que mucha gente está buscando un pie de página en la parte inferior que se desplaza en lugar de ser reparado, llamado pie de página adhesivo. Los pies de página fijos cubrirán el contenido del cuerpo cuando la altura sea demasiado corta. Tienes que configurar el html, el cuerpo y el contenedor de la página a una altura del 100%, establece tu pie de página en la posición más absoluta de la parte inferior. El contenedor de contenido de su página necesita una posición relativa para que funcione. Su pie de página tiene un margen negativo igual a la altura del pie de página menos el margen inferior del contenido de la página. Ver la página de ejemplo que publiqué.
Ejemplo con notas: http://markbokil.com/code/bottomfooter/
Esto funcionó para mí:
.footer
{
width: 100%;
bottom: 0;
clear: both;
}
Intenta configurar los estilos de tu pie de página en la position:absolute; y bottom:0; .
La siguiente propiedad CSS lo hará
position: fixed;
Espero esta ayuda.
Si usa la "posición: fijo; inferior: 0;" su pie de página siempre aparecerá en la parte inferior y ocultará su contenido si la página es más larga que la ventana del navegador.
Tuve un problema similar con este tutorial de pie de página adhesivo. Si la memoria le sirve, debe colocar sus etiquetas de formulario dentro de su sección < div class=Main /> ya que la propia etiqueta del formulario causa problemas con la alineación.
#Footer {
position:fixed;
bottom:0;
}
Esto hará que el pie de página permanezca en la parte inferior de la ventana del navegador, sin importar dónde se desplace.
#Footer {
position:fixed;
bottom:0;
width:100%;
}
trabajó para mi
#footer{
position: fixed;
bottom: 0;
}