-
Cómo poner un pie de página en una página Web
-
La mayoría de los sitios web contienen pies de página con la información, tales como fechas de copyright, "sobre nosotros" oportunidades de información y de carrera. Si bien parece como si debe ser lo suficientemente simple para colocar los elementos en la parte inferior de la página, a menudo la información se moverá en función del tamaño del navegador y la cantidad de texto. El uso de hojas de estilo en cascada (CSS) y divs, puede crear un pie de página sencilla que se quedará en la parte inferior de la página, independientemente del tamaño de la ventana y la cantidad de contenido.Instrucciones
1 Establecer las propiedades de altura del cuerpo y de clase contenedor. En la hoja de estilo CSS establecer el "html" y las clases de "cuerpo" a la altura del 100 por ciento. Añadir una clase de "contenedor" y ajuste la altura min a 100 por ciento, la altura de auto! Importante, la altura al 100 por ciento y el margen de 0 auto negativo (altura de pie de página).
Por ejemplo "html, body {height: 100%;}" y ".container {min-height: 100%; ! Height: auto importante; altura: 100%; margen de 0 -35px auto ".
2 Añadir dos clases para el pie de página. Una clase contendrá el pie de página real, mientras que la otra clase se extiende más allá de los márgenes de la página para hacer espacio para el pie de página. Conjunto tanto de estas clases a la misma altura. Por ejemplo, ".footer {height: 35px;}" y ".extender {height: 35px;}"
3 Consulte el ejemplo siguiente hoja de estilos CSS. Copia y pega el siguiente código en la hoja de estilo. Cambie los nombres y la altura de pie de página si lo deseas.
{Margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%; ! Height: auto importante; altura: 100%; margin: 0 auto -35px;}
.footer {height: 35px;}
.extender {height: 35px;}4 Añadir estas clases en la página web. Introduzca un div para la etiqueta de contenedores entre la apertura y el cierre de etiquetas para el cuerpo. Introducir el contenido de la página web después de la etiqueta de apertura del envase. Añadir un div para la clase extensor después de etiqueta de cierre de los contenidos ". A continuación, cierre la etiqueta envase después de etiqueta de cierre del extensor. Añadir un div para el pie de página después de la etiqueta de cierre del contenedor. Introduzca el contenido del pie de página. A continuación, cierre la etiqueta de pie de página.
5 Consulte el siguiente código HTML. Copia y pega el siguiente código en su sitio web. Cambiar los nombres para reflejar sus clases reales y añada contenido si lo deseas.
<Html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="container">
<p>Web Content</p>
<div class="extender"></div>
</div>
<div class="footer">
<p>Footer Content </p>
</div>
</body></ Html>
