HTML 5 La etiqueta de pie de página siempre está en la parte inferior

Estoy desarrollando un sitio en HTML 5. Envuelvo todo el contenido de mi pie de página en la etiqueta del pie de página. Como código debajo deHTML 5 La etiqueta de pie de página siempre está en la parte inferior

<!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

Fuente

2010-11-11 vaibought

etiqueta de pie de página de HTML 5 no poner mágicamente el contenido al pie de la página - que todavía tiene que diseñarlo como siempre tiene. A este respecto, funciona exactamente igual que un <div>, por lo que debe tratar como tal mediante la especificación de CSS para hacer que se vea como se pretendía:

footer { 
    //CSS code to make it display at the bottom, same as you would have done for a div. 
}

pies de página adjunta a la parte inferior de la página que se conoce como "pegajoso pies de página" . Puede encontrar más información sobre cómo lograr el efecto aquí: http://www.cssstickyfooter.com/

La etiqueta <footer> (junto con todas las otras nuevas etiquetas HTML5) no está allí para hacer maquetación, sino para fines semánticos; es decir, para dejar en claro a alguien que lee 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 el navegador, todos los navegadores actuales le permitirán especificar las nuevas etiquetas HTML5 excepto IE, pero afortunadamente todas las versiones de IE (incluso IE6) pueden forzarse permitiéndola incluyendo el HTML5Shiv hack en su página.

Espero que ayude.

Fuente

2010-11-11 12:47:32 Spudley

Muchas gracias Spudley. Este enlace funcionó para mí. Ahora soy feliz. Estaba imaginando que en la revolución de HTML podría haber alguna buena solución proporcionada por la comunidad de desarrolladores de HTML, pero en contra de mis expectativas no lo hicieron. Pero su enlace es muy útil para mí. Gracias – vaibought

Después de algunos experimentos, he llegado a la conclusión de que cuando se trata de usar la solución de cssstickyfooter.com combinada con el hack de HTML5Shiv, hay un pequeño problema con las instrucciones. Para el pie de página adhesivo le dicen que agregue lo siguiente a su encabezado: " nlinus

Haga esto de la misma manera que hazlo en HTML4.01.

Fuente

2010-11-11 12:13:27 Rob

Ya lo hice, pero no encuentro ninguna publicación suficiente que funcione en mi caso. ¿Puede por favor sugerirme alguna buena publicación – vaibought

Hay un buen JS para obtener HTML5-soporte para IE < 9 ... los otros navegadores ya son compatibles con los elementos HTML5.

https://code.google.com/p/html5shiv/#

Fuente

2010-11-11 12:13:48 albuvee

Mientras que las personas están sugiriendo html5shiv, recomiendo el uso de Modernizr así:

http://www.modernizr.com/

Y también puede que echar un vistazo a:

http://html5boilerplate.com/

Esto ayudará a todos los navegadores muestran su sitio correctamente Buena suerte.

Fuente

2011-08-04 12:39:23 rickyduck

Esto debe llegar a donde está mirando para ir: (editado para agregar línea adicional para que el código de marcado mostrará bueno)

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í es 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; 
}

Fuente

2013-11-15 18:28:56 socialmatchbox

Usando posición absoluta de <footer> obras, pero si usted tiene un contenido extendiéndose como su principal anchura crece verá el problema, o al utilizar el inspeccionar, la fo oter comienza a colgar en el medio de la pantalla. No es una solución perfecta, pero el uso de fondo fijo simplemente resuelve el problema.

Fuente

2016-03-23 17:08:43 Derya

HTML 5 La etiqueta de pie de página siempre está en la parte inferior

Respuesta

Cuestiones relacionadas