28173 sujets

CSS et mise en forme, CSS3

Div flottant couvrant l'intégralité de la page

Bonjour,

Travaillant sur un site "adulte" je dois mettre en place un disclaimer efficace tout en étant "google friendly".
L'idée est donc de crée un div flottant à la manière des pubs que l'on trouve en ouverture d'allocine.fr, qui couvre l'intégralité de la fenêtre du navigateur, ensuite les cookies et le JavaScript (pour fermer le div) feront le reste.

Donc dans un 1er temps j'essaye de faire mon div, mais je rencontre déjà quelques soucis :
#disclaimer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: red; z-index: 100; }

Avec ça, c'est presque bien sous firefox, ça couvre toute la surface, mais dès que je scroll vers le bas, le div ne couvre plus. Quant à IE, ça ne couvre rien du tout, car il ne fait pas la même interprétation du height: 100%.

Quelle est donc la bonne formule pour avoir un div qui couvre parfaitement la fenêtre même après un scroll, et ce sur tous les navigateurs (enfin les plus courants) ?

Merci pour votre aide Smiley cligne
Merci Smiley cligne

J'obtiens maintenant le même résultat avec IE et Firefox. Mais ça ne couvre toujours QUE la partie visible de la page. Dès que je scoll, le div ne couvre plus :'(
Administrateur
Htitipi a écrit :
Quant à IE, ça ne couvre rien du tout, car il ne fait pas la même interprétation du height: 100%.

Hello,
Oui c'est exact.

Aaah, que ferait-on sans la FAQ, hein ? Smiley cligne

Htitipi a écrit :
J'obtiens maintenant le même résultat avec IE et Firefox. Mais ça ne couvre toujours QUE la partie visible de la page. Dès que je scoll, le div ne couvre plus :'(

Exact également. L'explication se trouve dans la Note de l'élément de FAQ que je t'ai donné.
Modifié par Raphael (06 Apr 2007 - 12:50)
Merci Smiley cligne Ceci dit, je ne suis guère plus avancé... La solution passe sans doute par JavaScript pour récupérer la valeur de la hauteur de la fenêtre du client. Mais pour le moment ça ne marche pas.
Bonjour,

Je donnerais un height monumental (3000px avec un width: 100% ) avec un background-color et dans ce bloc j'en calerais un autre contenant le disclaimer ...
Modifié par ghost (06 Apr 2007 - 14:22)
Salut.

Pour résoudre ton problème, tu peux utiliser la position fixed. Comme ça ton disclaimer restera toujours en haut de la fenêtre même en cas de scroll.


html, body	{ width:100%; height:100%; margin:0; padding:0; }
#disclaimer	{ background-color:red; width: 100%; height:100%;
			position:fixed; top:0; left:0; }


Par contre IE ne connaît pas cette propriété.

Solution dénichée sur Alsa...S (ici, deuxième lien):

html		{ overflow: visible; }
body		{ overflow: auto; }
#disclaimer	{ position:absolute; }

A mettre en commentaires conditionnels pour toutes les versions d'IE.
Modifié par <nicolas> (06 Apr 2007 - 15:10)
Sujet clos
Aller à