CSS Margen de pie de página adhesivo

NO quiero un pie de página fijo, necesito un pie de página STICKY.CSS Margen de pie de página adhesivo

Mi pie de página pegajoso funcionaba bien al principio, pero cuando el contenido está a cierta altura, hay un margen entre el pie de página y la parte inferior de la página.

Intente jugar con la altura del navegador y la altura del contenido div, y debería ver dónde está el problema.

Deja un margen incómodo entre el pie de página y la parte inferior de la página.

Gracias de antemano.

Código CSS: Código

html, body { 
    height:100%; 
    margin:0; 
} 
body { 
    color:#FFF; 
    font:16px Tahoma, sans-serif; 
    text-align:center; 
} 
a { 
    text-decoration:none; 
} 
#wrapper { 
    height:100%; 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
} 
#content { 
    background:#F00; 
    height:950px; 
} 
#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
} 
#footer span { 
    color:#FFF; 
    font-size:16px; 
    padding-right:10px; 
} 
#push { 
    clear:both; 
    height:30px; 
}

HTML:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Bad Footer</title> 
     <link rel="stylesheet" href="badfooter.css" type="text/css"> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <a href=""><span>About Us</span></a> 
     <span> | </span> 
     <a href=""><span>Contact Us</span></a> 
     <span> | </span> 
     <a href=""><span>Home</span></a> 
    </div> 
</body>

Fuente

2012-08-08 Connor

Sólo añadir position: fixed; a su clase footer en el CSS:

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; /*add this new property*/ 
}

----- ----- ACTUALIZACIÓN

Si necesita un pie de página que se mantiene en la parte inferior se necesitan dos cosas:

#wrapper { 
    /*height:100%;*/ /*you need to comment this height*/ 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
    position: relative; /*and you need to add this */ 
} 

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: relative; /*use relative position*/ 
}

#wrapper { 
 
    /*height:100%;*/ /*you need to comment this height*/ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    min-height: 700px; /* only for Demo purposes */ 
 
    padding-bottom: -30px; 
 
    width: 985px; 
 
    position: relative; /*and you need to add this */ 
 
} 
 
#footer { 
 
    background: #000; 
 
    border-top: 1px solid #00F0FF; 
 
    height: 30px; 
 
    margin-top: -30px; 
 
    padding: 5px 0; 
 
    width: 100%; 
 
    position: relative; /*use relative position*/ 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
 
    </div> 
 
    <div id="push"></div> 
 
</div> 
 
<div id="footer"> 
 
    <a href=""><span>About Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Contact Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Home</span></a> 
 
</div>

Fuente

2012-08-08 15:47:46 Luis

Posición de ajuste que fija no es un pie de página pegajoso ... fijo significa que se permanecer en la parte inferior en todo momento (a pesar del desplazamiento). Los pies de página pegajosos, por otro lado, son mucho más complicados. Si hay desplazamiento, deberá desplazarse hacia abajo para ver el pie de página; de lo contrario, permanecerá en la parte inferior. – Connor

@Connor revise la actualización en la respuesta – Luis

¡Eso pareció hacer el truco! Gracias un montón. – Connor

Agregue position: fixed a la clase de pie de página. Tenga en cuenta que no funciona en ciertas versiones anteriores de Internet Explorer. http://jsfiddle.net/kAQyK/

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
}

Ver http://tagsoup.com/cookbook/css/fixed/ para ver ejemplos de cómo hacer que también funciona en IE

Fuente

2012-08-08 15:48:32 Samuel

PALABRAS CLAVE: STICKY FOOTER. Establecer la posición como fijo no es un pie de página adhesivo ... fijo significa que permanecerá en la parte inferior en todo momento (a pesar del desplazamiento). Los pies de página pegajosos, por otro lado, son mucho más complicados. Si hay desplazamiento, deberá desplazarse hacia abajo para ver el pie de página; de lo contrario, permanecerá en la parte inferior. – Connor

que estaba teniendo el mismo problema para las edades y nada parecía funcionar entonces me di cuenta de que el espacio en blanco que estaba viendo debajo de mi pie estaba no en realidad espacios en blanco, pero el desbordamiento de mi pie de página con texto blanco sobre fondo blanco. Todo lo que tenía que hacer era agregar:

overflow:hidden

a mi pie de página en mi css.

Si alguien quiere que la solución que funcionó para mí, entonces es lo mismo que http://getbootstrap.com/2.3.2/examples/sticky-footer.html pero con el añadido de desbordamiento: oculto

Fuente

2014-07-07 01:34:19 Dominic

DISPLAY TABLA = NO JS y altura fija NO!

Funciona en navegadores modernos (IE 8 +) - Lo probé en varios navegadores y todo parecía funcionar bien.

Descubrí esta solución porque necesitaba un pie de página adhesivo sin altura fija y sin JS. El código está abajo.

Explicación: Básicamente tiene un contenedor div con 2 elementos secundarios: un contenedor y un pie de página. Coloque todo lo que necesita en la página (excepto el pie de página) en el contenedor. El contenedor se establece en display: table; La envoltura se establece en display: table-row; Si establece el html, cuerpo y envoltura para height: 100%, el pie de página se pegue al fondo.

El pie de página se establece en display: table; también. Esto es necesario para obtener el margen de elementos secundarios. También puede configurar el pie de página en display: table-row; Esto no le permitirá configurar margin-top en el pie de página. Necesita ser creativo con más elementos anidados en ese caso.

La solución:https://jsfiddle.net/0pzy0Ld1/15/

Y con más contenido:http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body, 
 
#container, 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
#container, 
 
#wrapper, 
 
#footer { 
 
    width: 100%; 
 
} 
 
#container, 
 
#footer { 
 
    display: table; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
} 
 
/* THIS IS JUST DECORATIVE STYLING */ 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 
#header, 
 
#footer { 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
} 
 
#header { 
 
    padding: 1em; 
 
} 
 
#content { 
 
    background: orange; 
 
    padding: 1em; 
 
} 
 
#footer { 
 
    margin-top: 1em; /* only possible if footer has display: table !*/ 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     HEADER 
 
    </div> 
 
    <div id="content"> 
 
     CONTENT 
 
     <br> 
 
     <br>some more content 
 
     <br> 
 
     <br>even more content 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
     FOOTER 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <p> 
 
     MORE FOOTER 
 
    </p> 
 
    </div> 
 
</div>

Fuente

2016-02-08 16:55:38

CSS Margen de pie de página adhesivo

Respuesta

Cuestiones relacionadas