Mantenga pie de página con altura variable en la parte inferior

necesito mantener un pie de página en la parte inferior, pero su altura es variable soluciones para que los principales no son adecuados para mí ...Mantenga pie de página con altura variable en la parte inferior

ejemplos de lo que no puede hacer: http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

Alguien tiene una solución para los pies de página flexibles? Gracias

Fuente

2012-02-03 diegoiglesias

2014 ACTUALIZACIÓN: La forma moderna de resolver este problema de diseño es use the flexbox CSS model. Es compatible con todos los principales navegadores e IE11 +.

Aquí es una solución para el pie de página pegajosa de la altura flexible, utilizando div s con display: table-row:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 
.content { 
 
    display: table-row; 
 
    /* height is dynamic, and will expand... */ 
 
    height: 100%; 
 
    /* ...as content is added (won't scroll) */ 
 
    background: turquoise; 
 
} 
 
.footer { 
 
    display: table-row; 
 
    background: lightgray; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <h2>Content</h2> 
 
    </div> 
 
    <div class="footer"> 
 
    <h3>Sticky footer</h3> 
 
    <p>Footer of variable height</p> 
 
    </div> 
 
</div>

Lo que hay que señalar es que el CSS se diseñó a la disposición documentos , no pantallas de aplicaciones web. La pantalla CSS: las propiedades de la tabla son muy válidas y se admiten en all major browsers. Esto no es lo mismo que usar tablas estructurales para el diseño.

Fuente

2012-09-03 04:34:05

+1, esto es realmente genial. ¿Conoces algún inconveniente de este enfoque? ¿Cómo crees que se mantendrá en el móvil? –

Esto es brillante, ¡gracias! Sin embargo, no se ajustaba a mis necesidades, que era para un pie de página adhesivo de altura variable y un área de contenido que * se * desplazaría. Descubrí que podía hacerlo omitiendo "display: table-row" en el contenido y estableciendo "overflow-y: scroll". En el pie de página, luego lo cambié a "display: table-footer-group". ¡Esto ha causado que las cosas funcionen exactamente como se desea! – nkoren

Debe agregar 'table-layout: fixed;' al contenedor de clase. Sin eso, tuve algunos problemas de ancho en IE. El contenido se desbordó independientemente del ancho máximo. –

Creo que entiendo qué es lo que.

Es necesario eliminar el css altura y reemplazarlo con padding-top y la parte inferior de relleno si todavía lo espaciamiento ..

Por ejemplo,

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #6CF; 
    padding-top: 20px; 
    padding-bottom: 20px; 
}

Fuente

2012-02-03 14:05:11

lo comprobaremos, gracias – diegoiglesias

Si esto funciona, puede marcar mi publicación como el guion. Gracias –

-1

#wrapper, #content, #footer { 
    width:100%; 
    height:100%; 
    position: relative; 
} 


<div id="wrapper"> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

Fuente

2013-10-10 04:40:46

... no crea un pie de página de altura variable, sino que lo escala al 100% del área de la vista. – HumanInDisguise

Mantenga pie de página con altura variable en la parte inferior

Respuesta

Cuestiones relacionadas