CSS: Hacer que el pie de página se adhiera a la parte inferior de una página

Algunos de ustedes van a redactar inmediatamente el pie de página adhesivo de Ryan Fait, pero ese es el que he estado usando y no ha funcionado correctamente.CSS: Hacer que el pie de página se adhiera a la parte inferior de una página

Al acercar y alejar la página, "despega" el pie de página. He aquí un caso de prueba en vivo: http://jsfiddle.net/C2u3C/

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Andrew Louis</title> 
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" /> 
    <link rel="stylesheet" href="about-me.css" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="javascript/jqueryscript.js"></script> 

<body> 
    <br> 
    <h2>Andrew Louis</h2> 

    <div class="wrapper"> 
     <div class="subtitle"> 
      About Me 
      <div class = "subtitle-text"> 
      <br> <!--Spacing between image and subtitle --> 
      <img align="center" src="images/Profile.jpg" /><br><br> 
      <p>Synth sriracha wes anderson blog etsy, pickled truffaut street art. Brooklyn wolf sriracha trust fund fap. Retro chillwave readymade master cleanse. Mixtape carles pop-up ennui, viral DIY freegan fingerstache post-ironic williamsburg organic hella single-origin coffee lomo you probably haven't heard of them. Pickled biodiesel vinyl flexitarian narwhal occupy fanny pack, butcher forage lo-fi marfa iphone wayfarers. Gastropub aesthetic brooklyn, mcsweeney's carles wayfarers pop-up viral wolf thundercats. Put a bird on it brunch direct trade dreamcatcher kale chips, before they sold out pour-over tofu chillwave fixie 8-bit flexitarian typewriter.</p> 


      <br><p> Words and stuff </p> 

      <br> 
      </div> 
    </div> 

    <div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright © 2012 Andrew Louis</p> 
    </div> 
</body> 
</head>

CSS:

/*The New Stuff Begins Here*/ 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */ 
} 
.footer, .push { 
    clear:both; 
    height: 100px; /* .push must be the same height as .footer */ 
} 
.footer{ 
    font-family: 'Lobster1.3Regular'; 
    color:white; 
    text-align: center; 
    line-height: 25px; 
    background:#D04D21; 
} 
/* 

Sticky Footer by Ryan Fait 
http://ryanfait.com/ 

*/ 

h2{ 
    font-family:'WindsongRegular'; 
    font-size:33px; 
    color:#D04D21; 
    text-align:center; 
} 

.subtitle{ 
    float:left; 
    width:700px; 
    font-family:'Lobster1.3Regular'; 
    text-shadow: 0 0 1px rgba(0,0,0,0.5); 
    color:#D04D21; 
    position: absolute; 
    font-size:60px; 
    top: 4%; 
    left: 0px; 
    height: 1px; 
    text-align:left; 
    margin-left:150px; 
    margin-right:50px; 
} 

.subtitle-text p{ 
    text-align:left; 
} 

.subtitle-text{ 
    border-right:2px solid; 
    padding-right:55px; 
    float:left; 
    border-right:2px solid rgba(0,0,0,0.2); 
    width:700px; 
    font-family:'MuseoSlab500Regular'; 
    text-align:center; 
    /*margin-left:50px; 
    margin-right:50px;*/ 
    font-size:20px; 
    color:#D04D21; 
} 
.subtitle-text img{ 
    padding:3px; 
    border-top: 3px dashed #D04D21;/*#000000;*/ 
    border-bottom:3px dashed #D04D21;/*#000000;*/ 
    border-left:3px dashed #D04D21;/*#000000;*/ 
    border-right:3px dashed #D04D21;/*#000000;*/ 
</html>

Fuente

2012-06-27 Louis93

"Zoom de la página de entrada y salida "despega" el pie de página" - en la que el navegador (s)? – thirtydot

Estaba jugando con los pies de página y finalmente terminé usando

como un objeto entre mi encabezado y mi pie de página. Puede echar un vistazo a lo que tengo en http://www.cdsan.com. Todas las otras variantes que probé demostraron el comportamiento mágico o que no estaban funcionando son algunos de los navegadores. –

@thirtydot ¡En todos ellos! – Louis93

Respuesta

El porque es position:absolute; y float:left; en la clase de subtítulos. Una vez que se elimina el posicionamiento absoluto y se limpia el flotador, el problema desaparece. Dependiendo de dónde exactamente quiere que aparezca el subtítulo, debe haber otras opciones disponibles.

CSS:

.subtitle{ 
    float:left; 
    width:700px; 
    font-family:'Lobster1.3Regular'; 
    text-shadow: 0 0 1px rgba(0,0,0,0.5); 
    color:#D04D21; 
    text-align:left; 
} 

.footer, .push { 
    clear:both; 
    height: 100px; /* .push must be the same height as .footer */ 
}

Live DEMO

Fuente

2012-06-27 01:07:09

** + 1 ** para una respuesta excelente. – arttronics

Se puede utilizar esta:

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}

http://jsfiddle.net/C2u3C/2/

Fuente

2012-06-27 00:42:06 bfavaretto

Cubre el contenido si lo configura como fijo. –

Sí, se superpone el contenido, buena solución sin embargo. – Louis93

@JoshMein Sí, creo que entendí mal la pregunta, parece que el OP estaba buscando un efecto diferente. – bfavaretto

Cuestiones relacionadas