kustolovic a écrit :
Sinon une solution que j'utilise souvent, sur la base de la position absolute!...
Le padding-bottom sur #page étant là pour assurer que le contenu ne disparaisse pas sous le footer
Désolé, ça se met en bas d'écran même si le contenu dépasse la hauteur de l'écran.
Au cas où c'est moi qui aurais semé le cheni voici la page in-extenso:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Test de pied de page</title>
<style type="text/css">
body{
min-height:100%;
margin:0;
}
div{
margin:10px 0;
text-align:justify;
}
#Page { padding-bottom: 2.2em;}
footer {position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.4em 20px;
background:#3f3f3f;
font-size:2em;
color:white;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="Page">
<div>
<div>Lorem Elsass ipsum météor risus, vulputate quam, turpis, hopla auctor, Yo
dû.</div>
<div>non Spätzle tellus sagittis tristique ornare hopla Gal. suspendisse schneck
réchime rhoncus lotto-owe schpeck condimentum ornare nüdle porta et mollis sed
Oberschaeffolsheim und Miss Dahlias aliquam so pellentesque in, commodo munster
adipiscing Coopé de Truchtersheim libero. bissame blottkopf, flammekueche lacus
Huguette ac Kabinetpapier amet, s'guelt Salut bisamme consectetur chambon messti
de Bischheim Oberschaeffolsheim Pellentesque tellus turpis quam. jetz gehts los
dolor yeuh. amet baeckeoffe knepfle mänele Racing. barapli Salu bissame id,
Christkindelsmärik gal ante ch'ai geïz geht's Pfourtz !</div>
<div>ullamcorper gravida hop Richard Schirmeck rucksack merci vielmols Gal !
rossbolla sit knack amet Verdammi leo gewurztraminer id mamsell elit varius
bredele leo DNA, dui morbi Morbi leverwurscht sit nullam Chulien salu eleifend
semper wie hopla placerat picon bière senectus habitant Mauris libero, schnaps
vielmols, eget elementum libero, non sit Wurschtsalad purus tchao bissame hopla
Hans ac wurscht Carola ftomi!</div>
<div>Chulia Roberstau sed Strasbourg kougelhopf Heineken kuglopf dignissim
kartoffelsalad hoplageiss .Nam fermentum ipsum at felis imperdiet
imperdiet.</div>
<div>Ut nec pulvinar metus, id maximus dui. Sed augue justo, mattis eu vulputate ac,
tincidunt non enim. Suspendisse id nibh lectus.</div>
<div>Suspendisse mattis commodo auctor. Fusce tempor felis eu pretium imperdiet.
Morbi tortor dui, vulputate ut eleifend sit amet, rutrum eu ex. Quisque finibus
vitae tellus sit amet luctus. Donec vel neque lobortis, sodales lacus varius,
suscipit augue. Fusce hendrerit tempor quam, sed posuere nunc cursus sed. Fusce
nunc ex, interdum at ligula ut, molestie porttitor lectus. Proin vitae est vitae
libero aliquet imperdiet vehicula sit amet enim. Quisque gravida neque sed arcu
sollicitudin, quis scelerisque mi pulvinar.</div>
<div>Lorem Elsass ipsum Richard Schirmeck barapli Oberschaeffolsheim hop libero.
purus hopla sit quam, tristique commodo Spätzle Salut bisamme gewurztraminer
turpis Coopé de Truchtersheim schnaps tchao bissame Morbi tellus DNA,
Christkindelsmärik geïz messti de Bischheim dignissim ornare Pfourtz ! habitant
Chulia Roberstau hopla et dui vielmols, leo id, suspendisse eget sed jetz gehts
los s'guelt merci vielmols amet chambon sit Miss Dahlias turpis, baeckeoffe
schneck so bissame pellentesque picon bière lacus Oberschaeffolsheim salu quam.
ante ullamcorper auctor, blottkopf, vulputate und consectetur Gal. in, geht's
flammekueche ftomi! leverwurscht schpeck hoplageiss mamsell leo wurscht eleifend
météor Chulien id dolor Carola réchime Wurschtsalad amet, ch'ai mollis rucksack
tellus adipiscing nüdle kuglopf porta Kabinetpapier nullam knepfle gravida
Verdammi varius Heineken hopla non Racing. wie Yo dû. hopla libero, elit Hans
sagittis bredele yeuh. Huguette Salu bissame Gal ! Strasbourg non ac semper
risus, senectus ornare lotto-owe elementum morbi knack placerat Mauris gal amet
libero, munster rhoncus condimentum kougelhopf aliquam mänele sed rossbolla
Pellentesque sit ac kartoffelsalad .</div>
<div>Lorem Elsass ipsum ac kuglopf knepfle quam, Oberschaeffolsheim schnaps turpis,
rhoncus dui Richard Schirmeck chambon ante Mauris ch'ai wie id, Pellentesque gal
mamsell auctor, ornare knack DNA, leo nullam barapli varius turpis rossbolla météor
tellus condimentum suspendisse s'guelt hopla gewurztraminer morbi tristique geht's
réchime ornare habitant sit schneck purus kartoffelsalad baeckeoffe sit so Salu bissame libero,
hopla porta eget quam.</div>
<div>Spätzle Heineken wurscht hoplageiss sed pellentesque consectetur tellus messti de Bischheim
flammekueche placerat non dignissim Miss Dahlias vulputate Pfourtz ! risus, Hans semper
Salut bisamme elit commodo lotto-owe gravida Kabinetpapier munster ac Morbi sed Chulia Roberstau amet und Gal.</div>
<div>in, elementum Racing. geïz leverwurscht ullamcorper et picon bière Gal !</div>
<div>adipiscing Coopé de Truchtersheim Strasbourg merci vielmols rucksack hopla Oberschaeffolsheim Yo dû.
tchao bissame hop Chulien yeuh. lacus non Carola schpeck hopla bredele amet Verdammi nüdle bissame ftomi!
dolor salu libero. blottkopf, sagittis libero, jetz gehts los amet, kougelhopf id vielmols,
mänele eleifend sit Christkindelsmärik aliquam Wurschtsalad mollis Huguette leo senectus .</div>
<div>Lorem Elsass ipsum mamsell ftomi! Wurschtsalad knepfle vulputate non yeuh. wurscht leo
morbi Carola Miss Dahlias condimentum nullam Chulien leo lacus purus
Salut bisamme sit Salu bissame elementum chambon placerat knack libero, consectetur
wie messti de Bischheim Racing. kougelhopf Huguette Pellentesque leverwurscht porta
Spätzle barapli quam, baeckeoffe hopla et nüdle dignissim bredele non salu Heineken turpis,
in, sed hopla merci vielmols munster auctor, rucksack elit libero, bissame Coopé de Truchtersheim schnaps Gal !
Kabinetpapier Verdammi Oberschaeffolsheim so tellus sagittis adipiscing quam. libero. gewurztraminer hoplageiss hop geht's amet,
eget eleifend Gal. rossbolla blottkopf, Pfourtz !</div>
<div>turpis ac vielmols, id météor sit schpeck amet commodo aliquam hopla geïz tellus Mauris dolor Yo dû.
hopla ante ornare habitant varius senectus kuglopf ac sit ch'ai ornare jetz gehts los s'guelt und amet dui DNA,
mänele picon bière risus, Oberschaeffolsheim flammekueche pellentesque id, ullamcorper schneck
kartoffelsalad Richard Schirmeck gal lotto-owe Chulia Roberstau tchao bissame semper tristique
Christkindelsmärik Morbi Hans Strasbourg sed suspendisse réchime mollis gravida rhoncus .</div>
<div>Lorem Elsass ipsum bissame Spätzle flammekueche baeckeoffe ornare rucksack risus,
hopla barapli kougelhopf leo Carola amet semper purus dolor hopla turpis, sit Pfourtz ! turpis Gal. m
étéor Strasbourg ac hoplageiss Heineken Salu bissame s'guelt sagittis ullamcorper Yo dû.
morbi ante ornare nüdle hopla et elementum libero. condimentum habitant lotto-owe libero,
kuglopf gal varius eleifend schnaps auctor, messti de Bischheim Morbi rossbolla chambon Kabinetpapier
wurscht leverwurscht amet, gravida libero, Miss Dahlias réchime Wurschtsalad amet Coopé de Truchtersheim Gal !
id, Chulien tchao bissame adipiscing picon bière Huguette kartoffelsalad non ftomi! gewurztraminer lacus aliquam DNA,
rhoncus schneck vulputate dignissim porta pellentesque nullam ac wie placerat sed dui
Oberschaeffolsheim senectus Racing. elit commodo vielmols, Salut bisamme eget Pellentesque
Hans Chulia Roberstau Mauris in, hop suspendisse sit mollis Oberschaeffolsheim Verdammi geïz knack so quam.
mamsell quam, Richard Schirmeck non yeuh. hopla schpeck ch'ai Christkindelsmärik tristique geht's id
jetz gehts los leo salu knepfle tellus consectetur bredele blottkopf, sed sit und mänele munster tellus merci vielmols .</div>
<!-- -->
</div>
</div>
<footer> CECI EST LE PIED DE PAGE </footer>
</body>
</html>
Vous remarquerez l'utilisation judicieuse des outils proposés par le site!
