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

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Botón flotante

Botón flotante

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

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

El elemento symbol para los SVG en HTML

El elemento symbol para los SVG en HTML

En esta entrada veremos un elemento muy útil para trabajar con los SVG que es el elemento symbol; este elemento ahorra mucho trabajo y permite agrupar una serie de figuras básicas y pintarlos empleando el elemento use.

Andrés Cruz 01-06-2015

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017