Comment faire un div 100% de la hauteur de la page (pas l'écran)?

J'essaie d'utiliser CSS pour créer un effet «grisé» sur ma page alors qu'une boîte de chargement est affichée au premier plan pendant que l'application fonctionne. Je l'ai fait en créant une div 100% hauteur/largeur, translucide noir qui a sa visibilité activée/désactivée via javascript. Je pensais que ce serait assez simple; cependant, lorsque le contenu de la page augmente au point que l'écran défile, le défilement vers le pied de la page révèle une partie qui n'est pas grisée. En d'autres termes, le 100% de la taille de la div semble s'appliquer à la taille de la fenêtre du navigateur, pas à la taille réelle de la page. Comment puis-je agrandir la div pour couvrir l'ensemble du contenu de la page? J'ai essayé d'utiliser JQuery .css ('height', '100%') avant d'activer la visibilité, mais cela ne change rien.Comment faire un div 100% de la hauteur de la page (pas l'écran)?

C'est le CSS du div en question:

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Merci.

Source

2009-06-16 Lee D

Ne serait-il travailler pour désactiver la barre de défilement pendant que vous div gris translucide est affiché? Voulez-vous vraiment que les utilisateurs puissent faire défiler vers le bas pour voir quelque chose qu'ils ne peuvent pas faire n'importe quoi avec de toute façon? – Adam

Si vous modifiez position: absolute à position: fixed, il fonctionnera dans tous les navigateurs sauf IE6. Cela corrige le div vers la fenêtre, de sorte qu'il ne disparaît pas lors du défilement.

Vous pouvez également utiliser $(document).height() dans jQuery pour le faire fonctionner dans IE6. Par exemple. Cela résoudrait évidemment le problème pour tous les autres navigateurs, mais je préfère ne pas utiliser JavaScript si je peux l'éviter. Vous auriez besoin de faire la même chose pour la largeur, en fait, au cas où il y aurait un défilement horizontal. Il ya aussi plenty of hacks around to make fixed positioning work in IE6, mais ils ont tendance à imposer d'autres limitations à votre CSS ou à utiliser JavaScript, donc ils ne valent probablement pas le coup.

En outre, je présume que vous avez un seul de ces masques, donc je suggère d'utiliser un ID pour cela au lieu d'une classe.

Source

2009-06-16 20:02:59 mercator

Si le masque est affiché avec Javascript, quoi de plus Javascript pour corriger le problème de hauteur? –

Merci, changer absolu à fixe était tout ce qui était nécessaire! Juste point sur l'ID aussi. –

@Lee: Excellent ... @ Paulo: Ce n'est pas vraiment un problème ici, je suis d'accord. Mais bien que le support de JS ne soit pas le problème ici, vous finissez par mélanger le style avec le comportement, et vous pourriez aussi (légèrement) affecter les performances. Et Lee a répondu à ta question aussi. La solution JavaScript n'était pas réellement nécessaire dans ce cas. – mercator

Si vous utilisez jQuery pour définir la hauteur avant la fenêtre je suppose qu'il est OK pour ajouter un peu plus javascript :)

Vous pouvez régler la hauteur de la div au scrollHeight de document.body - De cette façon, il devrait couvrir l'ensemble du corps. Vous avez besoin d'ajouter une supercherie supplémentaire pour vous assurer qu'il continue à couvrir le corps au cas où quelque chose en dessous décide de se développer.

Source

2009-06-16 20:05:47 ylebre

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

En réglant tous top, bottom, left et right, la hauteur et la largeur sont calculées automatiquement. Si screenMask est un enfant direct de l'élément <body> et que le modèle de boîte standard est activé (c'est-à-dire si le mode quirks n'a pas été déclenché), cela couvrira toute la page.

Source

2009-06-16 20:26:26

N'avez-vous pas besoin d'utiliser 'position: fixed' pour empêcher le div.screenMask de défiler, si la page sous-jacente est plus grande qu'une hauteur de viewport? –

Cela ne fonctionne pas du tout dans IE6. Dans d'autres navigateurs, il a besoin d'une position: relative au corps pour travailler, et même alors, il ne fonctionne que sur le défilement vertical, pas sur le défilement horizontal. – mercator

Je me rends compte que je réponds longtemps, longtemps après avoir été interrogé, mais j'ai atterri ici après avoir été brièvement dérangé par ce problème, et aucune des réponses actuelles n'est correcte.

est ici la bonne réponse:

body { 
    position: relative; 
}

Ca y est! Maintenant, votre élément sera positionné par rapport à <body> plutôt qu'à la fenêtre d'affichage.

Je ne voudrais pas déranger avec position: fixed, car son navigateur reste inégal.Safari avant iOS 5 ne le supportait pas du tout.

Notez que votre élément <div> couvrira la boîte de bordure de <body> (boîte + remplissage + bordure), mais ne couvrira pas sa marge. Compensez en définissant des positions négatives sur votre <div> (par exemple, top: -20px) ou en supprimant la marge de <body>.

Je vous recommande également de définir <body> à height: 100% pour vous assurer que vous ne vous retrouverez jamais avec une fenêtre partiellement masquée sur une page plus courte.

Deux points valides tirés des réponses précédentes. Comme le dit Ben Blank, vous pouvez perdre les déclarations width et height, en plaçant les quatre coins à la place. Et Mercator a raison de dire que vous devriez utiliser un identifiant au lieu d'une classe pour un élément aussi important.

Cela laisse le CSS complet suivant recommandé:

body { 
    position: relative; 
    margin: 0; 
} 

#screenMask { 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    z-index: 1000; 
    background-color: #000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

Et HTML:

<body> 
    <div id="screenMask"></div> 
</body>

J'espère que cela aide quelqu'un d'autre!

Source

2012-08-16 03:32:34

+1, mais je ferai remarquer que même cette approche est discutable lorsque la position du conteneur de défilement par rapport à relative peut avoir des conséquences imprévues. Heureusement pour moi, aujourd'hui, mon conteneur de défilement est déjà positionné! L'astuce de l'utilisation de 'position: absolute' combiné avec' left', 'right',' top', et 'bottom' est parfois un véritable gain de temps, et toujours facile à oublier. –

Le positionnement par rapport à 'body' le résout presque, mais régler la hauteur du corps à 100% n'est pas une solution utile: Tout en corrigeant les pages qui ne remplissent pas la fenêtre, il casse les plus grandes. . De plus, mettre "min-height: 100%" dans le corps semble ne rien faire du tout (Firefox). –

Si vous voulez pop-up avec effet de superposition vous pouvez alors utiliser ces étapes ..

<style> 
.overlay{ 
background:#000; 
opacity:0.5; 
position:fixed; 
z-index:1; 
width:100%; 
height:100%; 
} 
.popup{ 
width:500px; 
margin:auto; 
position:fixed; 
z-index:2; 
height:300px; 
} 
</style> 
<div class="overlay"></div> 
<div class="popup"> 
     Hello everyone 
</div>

Source

2014-09-18 12:43:27

Comment faire un div 100% de la hauteur de la page (pas l'écran)?

Répondre

Questions connexes