Skip to content

Instantly share code, notes, and snippets.

@gcyrillus
Forked from anonymous/dabblet.css
Created May 13, 2013 16:10
Show Gist options
  • Save gcyrillus/5569483 to your computer and use it in GitHub Desktop.
Save gcyrillus/5569483 to your computer and use it in GitHub Desktop.
basic pied de page glissant en HTML5 avec 4 selecteur et 10 regles
/* basic pied de page glissant en HTML5 avec 4 selecteur et 10 regles */
html {height:100%;}
body {margin:0;min-height:100%;position:relative;}
footer {position:absolute;width:100%;bottom:0;left:0;height:2em;}
section {margin-bottom:2em;}
/* ============================================
Le principe est d'un élément en position relative dans lequel on place un autre element en position absolute
!IMPORTANT! PENSEZ feuille de style => heritage en cascade et flux du document
1) html en height:100%; reference de la hauteur de la fenêtre.
2) un conteneur principal en min-height:100% pour l'autoriser à s'agrandir,
qui se base sur la valeur de height de son parent direct !
ET en position:relative; comme reference de zone d'affichage pour ces enfants. (ICI => body qui a comme référent direct html, en position:relative, footer prend body comme referent de zone d'affichage)
3) un élément en absolute placé avec les coordonnées: bottom, left, right et top , au choix ou associées (ICI => footer mis a bottom et left 0 )
4) un element qui reste dans le flux avec une marge interne ou externe
qui empeche son contenu a se superposé a la zone qu'occupe l'element en position:absolute (ICI => section qui PRECEDE footer repousse une zone assez grande pour footer)
5) C'est tout, le reste c'est votre mise en forme
=============================================== */
/* un peu de maquilage,
mais vous faites ce que vous voulez
en prenant soint de reserver l'espace necessaire au pied ;)
===========================================================
*/
html {background:#333;}
body {margin:0 auto;width:80%;background:beige;}
header {background:gold;padding:0.25em;text-align:center;}
footer {background:purple;color:white;text-align:center;line-height:2em;}
section {background:ivory;}
<header><h1>header</h1><!-- + textes, navigation, ... --></header>
<section> section <!-- contenu principal , colonnes ou autre mise en formes --></section>
<footer> footer </footer>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment