1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Résolution du fixed</title>
<style type="text/css">
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
#latotale {
position:relative;
height:100%;
width:100%;
overflow:auto;
}
#lanim {
position:absolute;
width:100px;
height:100px;
bottom:10px;
right:20px;
border:1px solid black;
background:red;
}
</style>
</head>
<body>
<div id="latotale">
<h1>Résolution du fixed</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
</div>
<div id="lanim">
Et voila :)
</div>
</body>
</html> |
Partager