Pie de página adhesivo, o más bien: el contenido no se extiende al pie de página

Así que quería un pie de página adhesivo en una página y obtuve this one para que funcione para mí. Todo está bien, pero no, en realidad no ...Pie de página adhesivo, o más bien: el contenido no se extiende al pie de página

El problema es que quería que el contenido sobre el pie de página se extendiera hasta él. Ahora el cuadro que contiene el contenido principal termina justo después del texto en el cuadro, y hay un gran espacio entre el pie de página y el contenido. ¡Lo que quiero es que el fondo del contenido principal se extienda hasta el pie de página! ¡Vea mi bella imagen!

footerproblem

Esto es lo que tengo en este momento en html:

<div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
    <div id="main-content"> 
    </div> 
    </div> 
    <!-- end main --> 
</div> 
<!-- start footer --> 
<div id="footer"> 
</div>

Y en css:

html { 
    height: 100%; } 

body { 
    height: 100%;} 

/* wrap */ 
#wrap { 
    min-height: 100%; } 

/* main */ 
#main { 
    background-color: #43145c; 
    overflow: auto; 
    padding-bottom: 50px; } 

#main-content { 
    width: 720px; 
    margin: auto; 
    background-color: #643280; 
    padding-top: 20px; } 

#footer { 
    position: relative; 
    margin-top: -50px; 
    height: 50px; 
    clear: both; 
    background: red; }

He intentado establecer Estatura mínima de la principal a 100%, pero didn no funciona Solo quiero el color de fondo del contenido principal hasta el pie de página, ya que es diferente del cuerpo y la caja principal.

¿Tiene algún sentido? ¿Alguien puede ayudar?

Fuente

2012-02-21 stinaq

No se puede establecer la altura mínima de main, porque su elemento primario no tiene un conjunto de alturas. –

Prueba esto:

Reemplazar el código HTML y BODY Estilos en la hoja de estilo con esto:

html,body {height: 100%;}

A continuación, reemplace el "contenedor" con esto:

#wrap { min-height: 100%; height: auto; }

Esperanza eso ayuda.

Fuente

2012-02-21 21:27:16

No, en realidad ... = (De alguna manera la caja principal necesita obtener la altura mínima del espacio entre el encabezado y el pie de página, pero no tengo idea de cómo! – stinaq

@StinaQ: Agregue la altura mínima: altura del pie de página; el div principal y aplicar mi respuesta a lo especificado. Pruébalo, y si todo lo demás falla ... Mira esto: http://ryanfait.com/sticky-footer/ –

Prueba este

HTML

<body> 
    <div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
     <div id="main-content"> 
     </div> 
    </div> 
    <!-- end main --> 

    <div class="push"></div> 
    </div> 

    <!-- start footer --> 
    <div id="footer"> 
    </div> 
</body>

CSS

 * { 
      margin: 0; 
      padding: 0; 
     } 

     html, 
     body { 
      height: 100%; 
     } 

     /* wrap */ 
     #wrap { 
      background: green; 
      height: auto !important; 
      margin: 0 auto; 
     } 

     #wrap, 
     #main, 
     #main-content { 
      margin-bottom: -50px; 
      min-height: 100%; 
      height: 100%; 

     } 

     /* main */ 
     #main { 
      background-color: #43145c; 
     } 

     #main-content { 
      width: 720px; 
      margin: 0 auto; 
      background-color: #643280; 
     } 

     .push, #footer { 
      height: 50px; 
     } 

     #footer { 
      position: relative; 
      background: red; 
     }

Fuente

2012-02-21 21:51:17 mikos

Sé que esto se le preguntó hace 6 meses, pero he estado buscando la solución a este problema durante bastante mientras que ahora y espero que otras personas se puedan beneficiar de la solución que empleé para archivar. Estuviste en lo cierto cuando dijiste que de alguna manera la caja principal necesita obtener la altura mínima del espacio entre el encabezado y el pie de página.

Desafortunadamente, no sé cómo se puede hacer esto con CSS puro, es bastante fácil con javascript, por supuesto, pero esa solución no siempre es viable, y es un tanto desordenado en términos de separación de código. La buena noticia es que, dependiendo de lo que necesite hacer, hay un hack de CSS que puede emplear.

Lo que hice fue agregar un elemento completamente posicionado debajo del cuerpo que esencialmente se extendía desde debajo del encabezado hasta arriba del pie de página. De esta forma podría agregar un fondo o degradado en este #divBelowBody que esencialmente me permitió fingir que este problema es resuelto (aunque esta solución deja un sabor amargo en la boca).

Además, si quería agregar un borde alrededor de su div de contenido y esperaba que se extendiera al pie de página incluso cuando el contenido era pequeño, está jodido (aunque no realmente, probablemente pueda pensar en un truco o dos para hacer esto viable), por lo que sólo funciona si usted estaba esperando para añadir un fondo o un gradiente etc.

puede ver el código en acción aquí: http://jsfiddle.net/qHAxG/ ampliar la sección de resultados horizontalmente para ver más claramente lo que está pasando en.

Fuente

2012-09-02 08:41:48 RedHydra

ver THIS demostración: podría ser de utilidad. Parece que quieres un div con un color de fondo para estirar hasta el fondo. Pero el problema con el pie de página adhesivo es que también se queda en la parte inferior: se sale de tu camino cuando el contenido se extiende más allá del puerto de visualización. Por lo tanto, necesita cierta distancia (altura del contenido) para saber cómo hacerlo. Si esa altura no está designada por el contenido real ... el 100% tampoco lo hará realmente. porque entonces el pie de página "pegajoso" realmente no funciona ... estaría fuera de la pantalla. ¿De qué es realmente el 100%?

todo esto me ha frustrado por un año ... pero siempre encuentro una manera de que se vea de la manera que quiero incluso si no puedo lograr que funcione de la manera que quiero ... espero que ese enlace la demostración anterior tal vez preste otra pieza al rompecabezas. Buena suerte !

Fuente

2012-10-22 00:30:08 sheriffderek

Pie de página adhesivo, o más bien: el contenido no se extiende al pie de página

Respuesta

Cuestiones relacionadas