[Résolu] Comment couvrir toute la page

Bonjour
J'essaie de faire un élément #textArea qui "couvre" toute la page avec un fond semi transparent.
Quand j'écris:

html, body{width:100%;height:100%;}
#textArea {
    position:absolute;
    z-index:300;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.5);
}

ce "rideau" ne couvre que la fenêtre: si je scrolle, le bas de la page n'est pas couvert.
Bien sûr, si je mets height:200%; ça va bien couvrir toute la page, mais ça va inutilement agrandir cette page.
Quel est la bonne solution pour traiter ce problème?
Modifié par PapyJP (06 Jun 2016 - 18:35)

Bonsoir !

Pour couvrir toute la page, j'utilise toujours la même combinaison :
html, body {height : 100%;} et un conteneur appelé 'main' ou 'div#conteneur' avec la règle {min-height : 100%}

Ça marche plutôt bien en général...

La technique qui fonctionne bien consiste à "étirer" l'élément positionné en absolu avec des valeurs top/right/left/bottom nulles.

#textArea {
    position:absolute;
    z-index:300;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: rgba(0, 0, 0, 0.5);
}

Désolé, cela ne marche pas.
J'ai toujours le même phénomène: le 100% s'applique à la fenêtre (window) ou serait-ce à l'écran? en tout cas, j'ai:
http://jpmoularde.free.fr/maps/rideau1.png


ce qui a l'air très bien, mais si je scrolle vers le bas, j'ai:


http://jpmoularde.free.fr/maps/rideau2.png


ce qui n'est pas ce que je recherche.
S'il n'y a pas d'autre solution , je le mettrai en fixed au lieu de absolute, mais ça veut dire que si le texte devient plus grand que l'écran , il faudra mettre un ascenseur à la zone qui contient le texte, ce que je voudrais éviter.
Modifié par PapyJP (07 Jun 2016 - 00:34)

Il faut, comme tu l'as suggéré toi-même, utiliser la méthode de dew avec une position fixed. A toi ensuite de traiter la message box de manière indépendante par rapport à l'élément semi-transparent (position absolute ou autre).

Ce qui veut donc dire que la message box ne devra pas (plus ?) être un élément enfant de l'élément #textArea (qui pour le coup deviendra mal nommé...).
Modifié par Olivier C (07 Jun 2016 - 07:00)

Hmm!
C'est exactement parce que je ne voulais pas de cette solution que j'ai posté cette question!
N'y a-t-il vraiment aucun moyen de dire que la hauteur de ce "rideau" fait 100% de la page, et non 100% de l'écran?

Bonjour,

Les unités vh et vw ne répondent-elles pas à ce besoin ? Je n'ai pas testé, à voir.
Modifié par Greg_Lumiere (07 Jun 2016 - 09:56)

Bonjour @PapyJP

as-tu essayé avec la propriété vh ? :

height : 100vh;

ce n'est pas compatible avec les anciens navigateurs par contre...

Salut,
+1 pour le fixed. J'ai du mal a voir l'interet de faire scroller la popup et son fond.

Greg_Lumiere a écrit :
Bonjour,

Les unités vh et vw ne répondent-elles pas à ce besoin ? Je n'ai pas testé, à voir.

A priori non: vh, c'est un % de la hauteur de l'écran, pas de la page.

_laurent a écrit :
Salut,
+1 pour le fixed. J'ai du mal a voir l'interet de faire scroller la popup et son fond.

Le 'rideau" n'est pas le fond de la popup (même si j'ai attaché la popup au rideau), c'est quelque chose qui est sensé couvrir toute la page, et je découvre avec stupéfaction que je n'arrive pas à dire que quelque chose doit avoir la hauteur de la page, quoi que ce soit.
La seule solution pratique est effectivement de mettre le rideau en fixed et d'attacher la popup à autre chose, ce qui n'est pas un problème technique en soi.
Après tout, on peut comprendre que le rideau soit attaché à la fenêtre!! mais plus sérieusement j'aimerais comprendre si que quoi comment on peut utiliser la hauteur de la page quelque part.

Bonjour !

Ce n'est pas que je veuille voir forcément adopter ma méthode, mais elle marche enfin je crois...

html, body{width:100%;height:100%;}
main
       {
        min-height : 100%;
        position : relative;
        }
#textArea
        {
	position : absolute;
	 z-index : 300;
	left : 0;
        top : 0;
	width : 100%;
	height : 100%;
	background-color : rgba(0, 0, 0, 0.5);
	}

<body>
	<main>
		<img src="une_image_très_grande" alt="" />
		<div id="textArea"></div>
	</main>
</body>

J'ai peut-être oublié le 'position : relative' pour le main...

Après Zelena avait mis le doit sur le pourquoi. Quand tu dis as ton fond de prendre 100% de la hauteur c'est la hauteur de quoi ? De son parent. J'imagine que son parent c'est body (puis html) hors tu as défini la hauteur du body (et html) à 100% donc la hauteur de la vue : https://jsfiddle.net/tgvoues6

Si entre les deux tu met une conteneur avec une min-height à 100% mais qui s’étend quand le contenu est trop grand là tu récupéreras toute la hauteur : https://jsfiddle.net/tgvoues6/1/

Sinon tu peux te servir directement de body comme conteneur et appliquer le min-height 100% dessus mais je ne sais pas si c'est légal

html,
body {
  min-height:100%;
  position:relative;
}

https://jsfiddle.net/tgvoues6/3/

Bonne jorunée


[EDIT] Ah bah voila
Modifié par _laurent (07 Jun 2016 - 11:59)

_laurent a écrit :
Après Zelena avait mis le doit sur le pourquoi. Quand tu dis as ton fond de prendre 100% de la hauteur c'est la hauteur de quoi ? De son parent. J'imagine que son parent c'est body (puis html) hors tu as défini la hauteur du body (et html) à 100% donc la hauteur de la vue : https://jsfiddle.net/tgvoues6

Si entre les deux tu met une conteneur avec une min-height à 100% mais qui s’étend quand le contenu est trop grand là tu récupéreras toute la hauteur : https://jsfiddle.net/tgvoues6/1/

Sinon tu peux te servir directement de body comme conteneur et appliquer le min-height 100% dessus mais je ne sais pas si c'est légal

html,
body {
  min-height:100%;
  position:relative;
}

https://jsfiddle.net/tgvoues6/3/

Bonne jorunée

Merci à tout pour votre aide
J'avais essayé le body avec min-height:100%, ça ne marchait pas mieux, et c'est ça qui me semblait incongru. Pourquoi <body> ne prend il pas tout la hauteur de ce qu'on a mis dedans, comme n'importe quelle vulgaire <div>?
Pour le reste, j'ai ajouté les quelques lignes de code nécessaires à créer un rideau en fixed, à faire une #textArea transparente, uniquement pour le positionnement de la popup, et à synchroniser l'affichage du rideau et de la popup, ça marche effectivement très bien, je n'en suis plus à quelque lignes de Javascript près.

PapyJP a écrit :
J'avais essayé le body avec min-height:100%, ça ne marchait pas mieux, et c'est ça qui me semblait incongru. Pourquoi &lt;body&gt; ne prend il pas tout la hauteur de ce qu'on a mis dedans, comme n'importe quelle vulgaire &lt;div&gt;?

Alors du coup après vérification il semble que si. C'est ton height:100% qui fixe sa hauteur à 100% de la fenêtre. SI on ne met rien du coup, tu peux voir que le body s'agrnadi avec le contenu. Le fait que son fils ne prenne pas toute sa hauteur est du a l'absence de positionnement car un élément positionné le fait par rapport a son premier ancêtre positionné.
Docn en résumant :

body {
  posiiton:relative;
}
.pop {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
}

devrait fonctionner : https://jsfiddle.net/tgvoues6/5/

reste à gérer le style par défaut (margin...)
Modifié par _laurent (07 Jun 2016 - 15:28)

@_laurent
Ok, c'est beaucoup plus clair.