son - poner el footer siempre abajo html
HTML 5 Pie de página de la etiqueta siempre en la parte inferior (6)
El uso de la posición absoluta para <footer> funciona, pero si tiene un contenido extendido a medida que crece su ancho principal, verá el problema, o al usar la inspección, el pie de página comienza a colgarse en el centro de la pantalla. No es una solución perfecta, pero usar el fondo fijo simplemente resuelve el problema.
Estoy desarrollando un sitio en HTML 5. Envuelvo todo el contenido de mi pie de página en una etiqueta de pie de página. Me gusta el código de abajo
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren''t the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>
Sin embargo, el código anterior no es el código del sitio real ya que no puedo compartir. ¿Puede alguien sugerirme la mejor manera de hacerlo en HTML 5 para que funcione en todos los principales navegadores como IE-6,7,8 / Firefox / Safari / Crome / Opera?
Esto debería llevarlo a donde quiere ir: (editado para agregar una línea adicional para que el marcado del código se muestre bien)
El HTML básico:
<footer>
<div class="colwrapper">
<div class="fltcol">col1</div>
<div class="fltcol">col1</div>
<div class="fltcol">col1</div>
</div>
</footer>
Aquí está el CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #949494;
color: #ffffff;
}
.colwrapper{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
/* Specify a 40 pixels gap between the columns: */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
/* Specify the width, style and color of the rule between columns: */
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
Haces esto exactamente de la misma manera que lo haces en HTML4.01.
Hay un buen JS para obtener compatibilidad con HTML5 para IE <9 ... los otros navegadores ya admiten los elementos HTML5.
La etiqueta de pie de página de HTML5 no pone mágicamente el contenido al pie de la página, aún así tienes que ponerle el estilo como siempre lo has hecho. En ese sentido, funciona exactamente como un <div> , por lo que debe tratarlo como tal especificando CSS para que se muestre como está previsto:
footer {
//CSS code to make it display at the bottom, same as you would have done for a div.
}
Los pies de página adjuntos en la parte inferior de la página se conocen como "pies de página pegajosos". Puede encontrar más información sobre cómo lograr el efecto aquí: http://www.cssstickyfooter.com/
La etiqueta <footer> sí (junto con todas las otras nuevas etiquetas HTML5) no está ahí para hacer magia de diseño sino para fines semánticos; es decir, para aclarar a alguien que está leyendo el código (o más probablemente un bot) que los datos dentro de la etiqueta son datos de pie de página.
En términos de compatibilidad con los navegadores, todos los navegadores actuales le permitirán especificar las nuevas etiquetas HTML5 excepto IE, pero afortunadamente todas las versiones de IE (incluso IE6) pueden ser obligadas a permitirlo al incluir el truco HTML5Shiv en su página.
Espero que ayude.
Mientras la gente sugiere html5shiv, recomiendo usar modernizr también:
Y también tal vez echar un vistazo a:
Esto ayudará a todos los navegadores a renderizar su sitio correctamente. Buena suerte.