Dejar que la página fija pie de página (ventana) inferior (CSS-pegajoso y pie de página)
Esta es una técnica para hacer el pie de página sitio fijo en el navegador (el contenido de la página del navegador es menor que la altura) / inferior de la página. Implementado por HTML y CSS, sin trucos molestos. Por lo que normalmente se puede ejecutar en todos los principales navegadores (incluso IE5 y IE6).
Cómo hacer de pie de página CSS fijado por la parte superior de la página.
Añadir las siguientes líneas de código en el interior de hojas de estilo CSS. .wrapperCon márgenes negativos .footery .pushla misma altura. márgenes negativos deben ser igual a la altura total del pie de página (incluyendo relleno, borde).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}De acuerdo con esta estructura HTML. Contenido no excederá .wrapper y .footer la divetiqueta, a menos que el contenido es superado por CSS posicionamiento absoluto. Además, .pushla divetiqueta no debe contener contenido, después de todo, es como un elemento oculto se pie de página abajo "empuje". De lo contrario, se solapará con el contenido del pie de página.
<html>
<head>
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>diseños de varias columnas (vía flotante)
Para .pushañadir div atributo clara.
.footer, .push {
clear: both;
}height: auto importante, y la altura :! 100%; la propiedad
Estas dos propiedades a fin de lograr los siguientes navegadores IE6 y min-altura efecto (min-altura solamente IE7 compatible y por encima). Por lo tanto, cuando se debe tener en cuenta cuando IE6, puede eliminar estos dos atributos.
Debido a que IE6 es considerar el tamaño del contenido de un elemento, en lugar del tamaño del propio elemento. En el navegador compatible con los estándares, si el contenido del elemento es demasiado grande, lo hará solamente más allá de la caja. Sin embargo, en IE6, si el contenido del elemento es demasiado grande, todo el elemento se extenderá (incluyendo anchura y altura). Es decir, establecer el ancho se comporta como min-anchura.
El código completo: https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS%20Sticky%20Footer.html
Referencia: http://ryanfait.com/resources/footer-stick-to-bottom- de páginas /