fondo pie de página debe extenderse a la parte inferior del navegador

tengo un problema con la fijación del pie de página en la parte inferior del navegador .. El problema es cuando cambia la resolución o ventanas redimensiona el contenido de pie se superpone al contenido de la página web, aquí es el actual css para footer divfondo pie de página debe extenderse a la parte inferior del navegador

div.footer { 
     position:absolute; 
     bottom:0px; 
    }

¿Alguien sabe cómo puedo solucionar esto? Gracias

ACTUALIZACIÓN:

Esto es exactamente lo que necesito, pero por alguna razón no funciona para mi página web, que hace el trabajo cuando corto pegar el código de la página en blanco, pero ya que mi la página está llena de contenido y todo, ¿cuáles son los elementos importantes para incluir? Here es la URL.

El truco anterior funciona solo si mi sitio web ha llenado el contenido si tengo algunas líneas para dejar decir que el truco anterior no funciona.

ACTUALIZACIÓN II

Mi sitio tiene contenido dinámico así que creo que no se puede utilizar este tipo de CSS pies pegajosos, porque a veces el sitio web sólo tendrá unas líneas a veces se llena de contenido. Es por eso que el pie de página no se pega a la parte inferior de la página web ... no es un problema pegar el pie de página si hay mucho contenido en el sitio web sin el problema.

Fuente

2009-12-14 ant

Así estás usando/probando con IE? ¿Es el tipo de documento estricto? – BalusC

sí IE7 incluido, así como ff e IE8, el problema solo ocurre en IE7 – ant

¿qué tipo de documento estás usando? –

Lo usted tiene aquí un problema común para el que no hay una respuesta común, pero lo que probaría si fuera usted, ya que aparentemente todas estas sugerencias anteriores no funcionan, intentaría configurar el fondo de mi contenedor de página a cualquier color, por ejemplo blanco (#FFFFFF) y establecería el color de fondo del cuerpo en cualquier ot ella entonces blanca deja decir gris (#CCCCCC). Y, finalmente, establezca la posición del pie de página como relativa y, por supuesto, debe colocarse después de todo si siempre quiere que esté en la parte inferior. De esta forma obtendrás lo que necesitas 100% seguro si sigues las instrucciones paso a paso.

Fuente

2010-01-05 10:14:28 Adnan

¿Qué es "fondo de contenedor de página" y cómo es diferente? de "color de fondo del cuerpo" ('')? – joshuahedlund

El único problema es cuando tengo una tabla dentro de este cuerpo, que tiene dos columnas para mostrar. (haciendo IE desplazable horizontalmente). En ese caso, cuando se desplace hacia la derecha, verá que el fondo cambia a #CCCCCC – Jeevan

en la continuación del comentario anterior, resolví el problema haciendo un pequeño jquery - $ (document) .ready (function() { if ($ ('tabla de cuerpo'). Ancho()> 1000) $ ('cuerpo'). Ancho ($ ('tabla de cuerpo'). Ancho() + 300); }); --------- básicamente agregando 300 al ancho de la tabla y hacer eso como el ancho del cuerpo – Jeevan

Lo que estás buscando es un pie de página pegajoso, se puede encontrar una gran cantidad de recursos como éste: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Fuente

2009-12-14 13:07:47

No funciona realmente m8, ¿tiene algo más? – ant

depende de lo que quiere hacer. Os quiero que sea siempre visible en la parte inferior de la pantalla, se debe utilizar

div.footer{ 
    position: fixed; 
    bottom: 0; 
}

Asegúrese de conseguir un poco de relleno en la parte inferior de su cuerpo (o recipiente, de modo que la gente puede desplazarse a la parte inferior del texto). El principal problema aquí es que al cambiar el tamaño de todo lo que se superponen.

Si solo desea tener un pie de página que tenga una imagen de fondo/color que se extienda hasta el final (para páginas que no son de altura completa) podría intentar usar un principio de falsa columna o incluso intentar déle a su cuerpo el color de fondo de su pie de página y corrija el encabezado/fondo de contenido.

Hoy me encontré con esta página: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Podría ser atento

Fuente

2009-12-14 13:29:05 joggink

Gracias por su enlace – ant

Básicamente lo que necesita para dar el pie de página de un determinado height y para empuje el pie de página con otro div de la misma altura a la fondo. Hay sin embargo, más del navegador material específico que es necesario tomar en cuenta:

El html y body imprescindible además de tener una altura de 100% sin (por defecto) de margen para evitar el pie de página que es empujado aún más por debajo de esa cantidad de margen.
Los p y div elementos a través de la página deben tener nomargin-top para evitar el pie de página que es empujado aún más por debajo de esa cantidad de top-márgenes en menos de cada Firefox.
El "contenedor" div debe utilizar min-height de 100% en lugar de height para evitar el pie de página para solapar el resto del contenido. IE6, que no sabe min-height solo funciona bien con height, por lo que tendrá que añadir un corte * html para esto.

todos con todos, aquí hay un SSCCE, simplemente copy'n'paste'n'run que:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
     <title>SO question 1900813</title> 
     <style> 
      html, body { 
       margin: 0; 
       height: 100%; 
      } 
      p, div { 
       margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */ 
      } 
      #container { 
       position: relative; 
       min-height: 100%; 
      } 
      * html #container { 
       height: 100%; /* This is actually "min-height" for IE6 and older. */ 
      } 
      #pushfooter { 
       height: 50px; /* Must be the same as footer height. */ 
      } 
      #footer { 
       position: absolute; 
       bottom: 0; 
       height: 50px; 
      }  
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <p>Some content</p> 
      <div id="pushfooter"></div> 
      <div id="footer">Footer</div> 
     </div> 
    </body> 
</html>

Editar: después de más pruebas de que me di cuenta de que este hecho hace no trabajo en IE8 (sigo considerando como una beta, así que realmente no usar/probarlo, lo siento por eso), a menos lo dejas render en IE7 operandi compatibilidad (inserte aquí smilie triste), añadiendo la siguiente etiqueta meta a el <head> (que ya agregué al SSCCE aquí arriba)):

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

o dejar que se hacen en el modo de peculiaridades mediante el uso de un tipo de documento "malo" (o bien retire el <!doctype> o elegir uno de los doctypes asociados con dolorosamente rojo Q cajas en IE here). Pero yo no haría eso, eso tiene más efectos secundarios negativos también.

Y, sorprendentemente, el sitio http://www.cssstickyfooter.com como alguien más aquí mencionado aquí, que utiliza un enfoque totalmente diferente también se no trabajo aquí en IE8 (tratar de cambiar el tamaño de la ventana del navegador en el eje y, el pie de página no se moverá a lo largo de en comparación con otros navegadores, incluido IE6/7). Ese navegador me sigue asombrando. De Verdad.

Fuente

2009-12-14 15:00:00 BalusC

Esto funciona, pero mi pie de página aún no está en la parte inferior, está en el medio ... no está realmente pegado a la parte inferior – ant

Entonces el problema está más allá de la información que proporcionó. ¿Ha copiado, por ejemplo, el fragmento anterior ** sin cambios **? Si aún falla, por favor dígale a los detalles del navegador. – BalusC

He actualizado mi pregunta – ant

Pedido CSS Sticky Footer de un método compatible entre navegadores excelente.

Lo que básicamente hace que el sitio es hacer que el palo de pie por debajo del borde del navegador, y le da un margen negativo que tiene el mismo valor que la altura del pie de página. De esta manera, el pie de página seguramente se quedará en la parte inferior.

Fuente

2009-12-14 18:27:00

Parecía prometedor hasta que lo probé en la versión más reciente de IE8. No funciona Para mi sorpresa. También vea mi respuesta aquí: http://stackoverflow.com/questions/1900813/footer-background-should-extend-to-bottom-of-browser/1901381#1901381 – BalusC

Puede agregar push div al último elemento antes del pie de página para garantizar siempre que el pie de página no se superpone al contenido.

Teniendo en cuenta este ejemplo:

<html> 
    <body> 
    <div class="header" /> 
    <div class="content" /> 
    <div class="footer_push" /> 
    <div class="footer" /> 
    </body> 
</html>

Si <div class="footer" /> siempre es 75px alta, utilice el siguiente CSS:

html, body { height: 100%; } /* Take all available vertical space */ 

/* Push the bottom of the page 75px. 
    This will not make scrollbars appear 
    if the content fits already. */ 
.footer_push { height: 75px; } 

/* Position the footer */ 
.footer { position: absolute; bottom: 0; height: 75px; }

Fuente

2009-12-14 18:36:12

Intente configurar la posición de los pies de página a la relativa y jugar con un margen superior negativo a obténgalo como lo desee.

Fuente

2009-12-14 21:36:17 Davey

probar esto:

#wpr{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.dsp-tr{ 
    display: table-row; 
} 
.dsp-tc{ 
    display: table-cell; 
} 
#ftr-cnr{ 
    text-align:  center; 
    vertical-align: middle; 
} 
#ftr{ 
    background-color: red; 
    padding:   10px 0px; 
    font-size:  24px; 
} 


<div id="wpr"> 
    <div class="dsp-tr"> 
    <div class="dsp-tc"> 
     body 
    </div> 
    </div> 
    <div class="dsp-tr"> 
    <div class="dsp-tc" id="ftr-cnr"> 
     <div id="ftr"> 
     footer 
     </div> 
    </div> 
    </div> 
</div>

display: table no significa que sea una mesa, una <div> sigue siendo un <div>, simplemente le dice al navegador para mostrarlo como mesa. lo probé en Chrome y Firefox , avíseme si le conviene.

Fuente

2009-12-27 09:08:03 BigName

Tuvimos este problema varias veces. No pudimos encontrar ninguna solución CSS de navegador cruzado. Finalmente recurrimos a JQuery. Escribimos nuestro propio (no puedo publicar) pero éste http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm parece prometedor:

$(function(){ 
    positionFooter(); 
    function positionFooter(){ 
     if($(document.body).height() < $(window).height()){ 
      $("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"}) 
     } 
    } 

    $(window) 
     .scroll(positionFooter) 
     .resize(positionFooter) 
});

Fuente

2009-12-31 11:13:11

¿Tiene una DOCTYPE declaración en la parte superior de su HTML?

Si es así, hay una buena posibilidad de que tenga una solución para usted.

yo estaba tratando de hacer una altura: mesa 100% o div (suponiendo que esto es una piedra angular básica de la función de pie de página en expansión)

No importa lo que hice, la altura del 100% no funciona! los elementos simplemente no se extienden ...

I reducido a un HTML muy básico

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
<div style="border: 2px solid red; height: 100%">Hello 
World</div> 
</body> 
</html>

pero el DIV qué no se extienden hasta el fondo (el 100% fue ignorada). Esto también fue cierto para las tablas con el atributo plain height = "100%".

Como resultado desesperada última suposición, que eliminan la fila DOCTYPE, lo que resulta en el código

<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
<div style="border: 2px solid red; height: 100%">Hello 
World</div> 
</body> 
</html>

y funcionó!

Estoy seguro de que hay una buena explicación, pero realmente no importa ya que resuelve el problema

actualización

Relacionados question (hecha por mí)

Fuente

2010-01-03 18:21:21

Se me ocurrió una solución bastante simple que no utiliza ningún hack de altura de CSS ni nada de eso.

Usted acaba de establecer su <body> con el fondo que desea que tenga el pie de página, y luego poner todo, además del pie de página en un <div> con las propiedades que normalmente le daría a la etiqueta de cuerpo.

Esto hace que el pie de página "extienda" su color al pie de la página cuando hay contenido dinámico corto sin expandirlo innecesariamente cuando hay mucho contenido dinámico. El div "cuerpo virtual" aún puede tener un degradado seguido de un color sólido, y el fondo del pie de página se esconde en la etiqueta del cuerpo, solo aparece en páginas cortas. (Funciona muy bien si necesita un color sólido para continuar después de que termine su gradiente de pie de página, o si sólo tiene el fondo para que coincida con el color de pie de página)

CSS

body {background-color: #000; } 
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; } 
#footer { background: #000; }

HTML

<body> 
    <div id="primary_container"> 
    <!-- most content, can be short or long --> 
    </div> 
    <div id="footer"> 
    <!-- if primary content + footer is less than browser height, body background color 
     displays below this. If it is more, you get normal scroll behavior to the end 
     of footer and body background color is never seen --> 
    </div> 
</body>

Fuente

2012-03-13 15:43:10 joshuahedlund

fondo pie de página debe extenderse a la parte inferior del navegador

Respuesta

Cuestiones relacionadas