DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
14-08-2014

Hay muchas maneras de anclar en la parte inferior de la pantalla (o página mejor dicho), en esta entrada veremos una de ellas; en lo personal, esta es una de las formas que más me gusto debido a su sencillez y por lo tanto, pocos problemas de implementar; veamos:

Definiendo el HTML

En el HTML no hay mucho que definir o decir; básicamente necesitamos al menos el cuerpo del documento (representado por el tag section) y un footer (representado por el tag footer) que es el que vamos a anclar en la parte inferior de la pantalla; el siguiente código fue desarrollado pensando en lo expuesto:

<section>
<h1>Contenido</h1>
</section>
<footer>
  <h1>Footer</h1>
</footer>

Definiendo el CSS

Una vez más, definimos nuestro CSS como queramos, aquí solo mostramos las secciones más importantes; hay dos puntos que es importante notar del CSS anterior:

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #0BF;
}

section {
  min-height: 100%;
  /* igual al largo del footer */
  margin-bottom: -150px;
}

footer {
  height: 150px;
  background-color: #08B;
}

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un pulso con CSS

Creando un pulso con CSS

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

¿Cómo mostrar imágenes pixeladas con CSS3?

¿Cómo mostrar imágenes pixeladas con CSS3?

En esta entrada veremos comos mostrar imágenes pixeladas mediante la propiedad image-renderin en conjunto con su valor pixelated.

Andrés Cruz 20-08-2015

La pseudo-class nth-child en CSS

La pseudo-class nth-child en CSS

La pseudo-clase nth-child identificar un elemento dentro de una lista de etiquetas.

Andrés Cruz 16-07-2013

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015