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

Question

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

Demandé el 16 de Juin, 2009: Quand la question a-t-elle été
32142 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train d'utiliser CSS pour créer un "grisé" l'effet sur ma page en cours de chargement s'affiche au premier plan, tandis que l'application fonctionne. Je l'ai fait par la création d'un 100% de la hauteur/largeur, translucide noir div qui a sa visibilité activée/désactivée via javascript. Je pensais que ce serait assez simple; toutefois, lorsque le contenu de la page se développe au point que l'écran défile et défile vers le pied de la page révèle une partie qui n'est pas grisé. En d'autres termes, le 100% dans le div de la hauteur semble être l'application de la taille de la fenêtre du navigateur, pas la taille de la page. Comment puis-je faire la div s'étendent pour couvrir l'ensemble du contenu de la page? J'ai essayé à l'aide de JQuery .css('height', '100%') avant le basculement, c'est de la visibilité, mais cela ne changera rien.

C'est le CSS de la 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.

Demandé el 16 de Juin, 2009 par Lee D

Answer 1

4 Réponses

Answer 2

58voto

mercator Points 16196

Si vous modifiez position: absolute de position: fixed il fonctionne dans tous les navigateurs, sauf IE6. Ceci résout le div de la fenêtre d'affichage, afin de ne pas se déplacer hors de la vue lors du défilement.

Vous pouvez utiliser $(document).height() en jQuery pour le faire fonctionner dans IE6 trop. E. g.

$('.screenMask').height($(document).height());

Que serait évidemment de corriger ça pour tous les autres navigateurs aussi, mais je préfère ne pas à l'aide de JavaScript si je peux l'éviter. Vous devez faire la même chose pour la largeur trop, en fait, dans le cas où il y a un défilement horizontal.

Il ya beaucoup de hacks de le rendre fixe le travail de positionnement dans IE6 trop, mais ils ont tendance soit à imposer quelques autres limitations sur votre CSS, ou de l'utilisation de JavaScript, de sorte qu'il n'en vaut pas la peine.

Aussi, je présume que vous n'avez que l'un de ces masques, je vous suggère d'utiliser un ID au lieu d'une classe.

Répondu el 16 de Juin, 2009 par mercator (16196 Points )

Answer 3

17voto

Aaron Adams Points 822

Je me rends compte que je suis en répondant à cette longue, longue après qu'il a été demandé, mais j'ai atterri ici après avoir brièvement fauché par ce problème, et aucun des actuels réponses sont correctes.

Voici le droit de réponse:

body {
    position: relative;
}

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

Je ne vous embêtez pas avec des position: fixed, comme sa prise en charge du navigateur reste inégale. Safari avant iOS 5 n'a pas de soutien du tout.

Notez que votre <div> élément de couverture <body>s'border-box (boîte + padding + border), mais il ne couvre pas sa marge. Compenser par la mise en position négative sur votre <div> (par exemple, top: -20px), ou en supprimant <body>'s de la marge.

Je voudrais également recommander la création d' <body> de height: 100% pour vous assurer de ne pas vous retrouver avec un partiellement masqué fenêtre d'affichage sur une courte page.

Deux points valides prises de avant de réponses. Ben Vierge dit, vous pouvez perdre la width et height des déclarations, le positionnement de tous les quatre coins de la place. Et mercator est juste que vous devez utiliser un ID au lieu d'une classe pour un seul élément.

Cela laisse suivantes recommandé complet CSS:

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!

Répondu el 16 de Août, 2012 par Aaron Adams (822 Points )

Answer 4

3voto

Ben Blank Points 21786

 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 définissant tous les paramètres top , bottom , left et right , la hauteur et la largeur sont automatiquement calculées. Si screenMask est un enfant direct de l'élément <body> et que le modèle de case standard est en vigueur (le mode quirks n'a pas été déclenché), cela couvrira la page entière.

Répondu el 16 de Juin, 2009 par Ben Blank (21786 Points )

Answer 5

1voto

ylebre Points 2688

Si vous utilisez jQuery pour définir la hauteur avant le popup, je suppose qu'il est correct d'ajouter du javascript :)

Vous pouvez définir la hauteur de la div sur scrollHeight de document.body - ainsi, cela devrait couvrir l’ensemble du corps. Vous devez ajouter quelques astuces supplémentaires pour vous assurer qu'il continue de couvrir le corps au cas où quelque chose en dessous déciderait de se développer.

Répondu el 16 de Juin, 2009 par ylebre (2688 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: