2012-06-14 21 views
6

así que tengo un pie de página:Cómo adjuntar div al fondo sin absoluto?

<div id="footer" > 
    <div style="padding:20px;"> 
     Footer 
    </div> 
</div> 

¿Qué está en la envoltura con estilo:

#page { width:964px; margin:0 auto; } 

por eso es necesario que el div pie de página se une a la parte inferior del navegador. El problema es si la adición:

position:absolute; 
bottom:0; 

Algunos de los div anterior se cruza con el pie de página, y también necesito fijar la altura y la anchura por mi mismo.

demo

+0

Usted tiene el '# footer' el interior del' # page' pero quieren en la parte inferior de su documento HTML, ¿es eso? – Zuul

+0

Sí, porque si estuviera fuera de la página, necesito escribir dos veces las mismas propiedades. Creo que no es bueno ... Pero puede que esté equivocado ... – NoNameZ

+0

¿No puede proporcionar un enlace o publicar más información sobre el marcado de HTML y cualquier CSS relevante, especialmente para la '# página' y el' div 'que cruza el' # pie de página' – Zuul

Respuesta

-1

Uso:

#footer { 
    position: fixed; 
    bottom: 0; 
} 

He aquí un buen article a entender cómo position: obras

+0

pero ahora aparece el desplazamiento si existe más información en el cuerpo ... Puede ser que en la primera publicación describí el problema incorrectamente, porque necesito si en el cuerpo no hay muchas publicaciones, debe estar en la parte inferior del navegador, pero si hay algo más, debe ser al final, pero también debe permanecer en el navegador (tengo algunos píxeles entre div y la línea del navegador por defecto). – NoNameZ

+0

Esta no es en absoluto la solución correcta. Tendrá que usar algo llamado "pie de página adhesivo". Vea aquí una buena solución: http://ryanfait.com/sticky-footer – Tom

+0

preguntó cómo adjuntar un elemento a la parte inferior de la ventana y la posición del navegador: lo solucionado hace exactamente esto. Si él quería un "pie de página adhesivo", como está suponiendo, no está en la pregunta. – Luca

1

This no es exactamente lo que pide, pero es una aplicación similar que hice usando position: fixed .

Para lo que está tratando de lograr tendrá que usar position: absolute para hacerlo realidad. Y luego tendrá que dar la altura del elemento manualmente para que se ajuste correctamente. Y cuando tenga contenido dentro del footer, puede usar padding para perfeccionar la forma.

Estas son las únicas opciones posibles. O elija un posicionamiento fixed o absolute posicionamiento.

6

Trate como esto ..

El CSS

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
} 

El HTML

<div class="wrapper"> 
    <p>wrapper text here</p>  
    <div class="push"></div> 
</div> 

<div class="footer"> 
    <p>footer text here.</p> 
</div> 
+0

¿Es compatible con la altura de respuesta? ¿Qué ocurre si el contenido tiene un párrafo largo y supone presionar hacia abajo la altura del contenedor automáticamente? – user2734550

+0

sí, también admitirá la altura de respuesta –

+0

Esta es la única técnica que funcionó para mí. El único inconveniente que puedo ver es tener que especificar la altura del pie de página dos veces, pero no es un gran problema si estás usando un generador CSS o un sistema de plantillas. Ver http://ryanfait.com/sticky-footer/ para más información. –