¿Agregar un pie de página que siempre se muestra en la parte inferior de la pantalla?

¿Cómo puedo agregar un pie de página que siempre está en la parte inferior de la pantalla incluso cuando el contenido de la página es muy pequeño?¿Agregar un pie de página que siempre se muestra en la parte inferior de la pantalla?

ejemplo de problema, digamos que tengo una página que no tiene tanto en exhibición en ella , el pie de página por lo tanto se convierte en el medio de la pantalla. ¿Puedo asegurarme de que si la página no tiene muchos contenidos, entonces el pie de página debe estar en la parte inferior de la pantalla?

ACTUALIZACIÓN

Sólo quiero un pie de página que se encuentra en la parte inferior de la pantalla cuando no hay suficiente contenido para llenar toda la pantalla (es decir, que no quieren el pie de página a aparecer en el medio de la pantalla) y luego si hay suficiente contenido para que simplemente descienda en la parte inferior de la página.

Fuente

2011-05-29 Anonymous

duplicado posible de [Cómo puedo forzar mi pie de página que se adhieren a la parte inferior de cualquier página CSS?] (Http://stackoverflow.com/questions/5516910/how-can-i-force-my-footer-to-stick-to-the-bottom-of-any-page-in-css). De la pregunta, parece que estás buscando un [pie de página adhesivo] (http://stackoverflow.com/questions/tagged/css+html+sticky-footer)? –

que busca es un "pie de página pegajoso", este artículo muestra algunas de las técnicas que puede utilizar:

https://css-tricks.com/couple-takes-sticky-footer/

Aquí está la versión FlexBox: http://codepen.io/chriscoyier/pen/RRbKrL

HTML :

<body> 
    <div class="content"> 
    content 
    </div> 
    <footer class="footer"></footer> 
</body>

CSS:

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1; 
}

Fuente

2011-05-29 21:16:26 thirtydot

utilice las siguientes propiedades CSS:

position: fixed; 
bottom: 0px;

Fuente

2011-05-29 21:16:35

esto funciona muy bien, pero no quiero que sea un pie de página adhesivo, si hay mucho contenido en la página solo quiero que vaya al final de la página. –

@Sean: '" si hay mucho contenido en la página solo quiero que vaya al final de la página "' eso es exactamente ** lo que hace un pie de página adhesivo: http://ryanfait.com/sticky-footer/- no hay mucho contenido: http://jsfiddle.net/KMQxC/ frente a un montón de contenido: http: // jsfiddle.net/KMQxC/1/Edit: el comentario de su pregunta: '" solo quiero uno que esté en la parte inferior de la pantalla cuando no haya suficiente contenido para llenar toda la pantalla "' - Ahora estoy realmente confundido de qué se trata es lo que quieres Lo siento si no te estoy entendiendo aquí. – thirtydot

@ thirtydot mi mal, pensé que el pie de página pegajoso siempre estaba en la parte inferior de la pantalla y no en la parte inferior de la página, voy a probar ese ejemplo al que está vinculado, disculpe. –

usted querrá utilizar un elemento de posición fija que está unido a la parte inferior de la página.

Digamos que utiliza un div para abarcar el pie de página, usted querrá un poco de CSS como esto:

div#footer{ 
    position: fixed; 
    z-index: 1000000; 
    overflow: hidden; 
    bottom: 0px; 
    left: 0px; 
    height: 100px; 
    width: 600px; 
}

Es probable que desee actualizar la altura y anchura cuando un usuario cambia el tamaño de la forma. Probablemente necesites redimensionar el ancho de la carga de la página también.

Fuente

2011-05-29 21:17:53 tjarratt

Aquí hay una solución de CSS única, no se necesita jQuery. Hacer de la envoltura de altura mínima del 100% y la posición que sea relativamente, a continuación, coloque el pie absolutamente a la parte inferior izquierda:

#wrapper { 
    min-height:100%; 
    position:relative; 
} 

#content { 
    padding-bottom:80px; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

Source

Fuente

2014-11-10 20:50:37 Piero

Lo más probable es que se eliminen las respuestas del enlace, intente que sea una respuesta independiente, manteniendo el enlace de referencia :) – bummi

¿Es esto mejor? – Piero

¿Agregar un pie de página que siempre se muestra en la parte inferior de la pantalla?

Respuesta

Cuestiones relacionadas