¿Alguna vez has sentido frustración al ver cómo un pie de página se queda en mitad de una página web? La buena noticia es que existen técnicas fáciles de implementar para empujarlo hacia el final y lograr que tu contenido se vea mucho más ordenado y profesional. En este artículo te enseñaremos cómo hacerlo en pocos pasos. ¡No te lo pierdas!
En este tutorial, vamos a cubrir cómo empujar el pie de página hacia abajo de tu página web. Si bien hay varias formas de lograr esto, el enfoque descrito en este artículo se realiza de una manera simple utilizando CSS.
Este enfoque funcionará para Internet Explorer 7 y versiones posteriores, así como para los demás navegadores principales, como Chrome, Firefox, Safari y Opera.
Ejemplo sencillo
Las siguientes líneas de CSS son lo mínimo necesario para que un pie de página se coloque en la parte inferior de la página. Definitivamente puede agregar más propiedades de estilo para hacer que su pie de página sea más atractivo.
Es posible que haya notado un valor negativo establecido para la propiedad de margen que se aplica al elemento con una identificación wrapper. Este valor debe ser el mismo número que asignas como la altura de tu pie de página. También debe incluir relleno, bordes u otros elementos que puedan afectar la altura de la altura total del pie de página.
Si la página que está desarrollando es ASP.NET (.aspx), debe incluir la página form selector que se muestra en la línea 2. Por ejemplo: html, body, #form1 {height: 100%;}. Si no está desarrollando con ASP.NET, no incluya el selector de formulario.
Nota: También debe tener en cuenta que el uso del selector universal (*) en la línea 1 no es óptimo. Se está utilizando para este ejemplo simple, pero tenga en cuenta que este selector podría generar resultados no deseados con otros elementos HTML que no están incluidos en este ejemplo. Se prefiere usar un enfoque de restablecimiento de CSS.
CSS
* {
margin:0;
}
html, body {
height: 100%;
}
#wrapper {
min-height:100%;
margin-bottom:-75px;
}
#seperator, #footer {
height:75px;
}La estructura HTML dentro del cuerpo de la página web se simplifica para este ejemplo. Con esta técnica, debe asegurarse de que no haya contenido fuera del #wrapper y #footer elementos div.
Tampoco debe incluir ningún contenido dentro de la separator división El propósito de este div es garantizar que el pie de página no superponga el contenido.
HTML
<body>
<div id="wrapper">
Your cool website content here!
<div id="separator"></div>
</div>
<div id="footer">Footer Area</div>
</body>Aquí están los resultados del ejemplo sencillo. Como se puede ver, no muy impresionante. Nuestro pie de página en realidad está en la parte inferior de la página, pero el texto no se muestra en la parte inferior porque le asignamos una altura de 75 px al pie de página.
Ejemplo
En este ejemplo, vamos a incluir un encabezamiento, división de contenidoy pie de página. Agregaremos algunos estilos adicionales para que la página sea más atractiva para el usuario final. Los divs ocuparán el ancho de la página sin importar el tamaño de la pantalla.
Por supuesto, si queremos colocar logotipos y otros elementos dentro del encabezado y el pie de página, puede hacerlo y aplicar el relleno adecuado a esos elementos para que queden bien espaciados.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {height: 100%;font-size:1.25em;margin: 0;background:#efefef;}
#wrapper {min-height:100%;margin: 0 auto -75px;}
#header {background-color:#104ba9;min-width:100%;height:100px;float:left;font-size:1.5em;color:white;}
#separator, #footer {height:75px;}
#content {margin:0 auto;padding:15px;}
#footer {background:#6a93d4;min-width:100%;float:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Amazing Header!</div>
<div id="content">
<p>Your cool website content here!</p>
</div>
<div id="separator"></div>
</div>
<div id="footer">Footer Area</div>
</body>
</html>Ejemplo con contenido centrado
En este ejemplo, estamos usando algunas técnicas para centrar el contenido dentro del encabezado, div principal y pie de página. Lo primero que puede notar es que dentro del encabezado y el pie de página, tenemos un par de elementos div headerContent y footerContent.
Estas secciones contendrán las imágenes, el texto y otros elementos que normalmente se encuentran en la sección de encabezado y pie de página de una página web. Para centrar esos elementos en la página, todo lo que tenemos que hacer es asignar un ancho y un estilo de margen.
Por ejemplo, #element {width:940px;margin:0 auto;}. Una vez que agregue ancho al elemento y establezca el margen izquierdo y derecho en automático, el navegador centrará el elemento en la página.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {height: 100%;font-size:1.25em;margin: 0;background:#efefef;}
#wrapper {min-height:100%;margin: 0 auto -75px;}
#header {background-color:#104ba9;min-width:100%;height:100px;float:left}
#headerContent {width:940px;margin:0 auto;padding:15px;font-size:1.5em;color:white;}
#separator, #footer {height:75px;}
#content {margin:0 auto;width:940px;padding:15px;}
#footer {background:#6a93d4;min-width:100%;float:left}
#footerContent {margin: 0 auto;width:940px;padding:15px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">Amazing Header!</div>
</div>
<div id="content">
<p>Your cool website content here!</p>
</div>
<div id="separator"></div>
</div>
<div id="footer">
<div id="footerContent">Footer Area</div>
</div>
</body>
</html>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
