HTML superposition de hauteur pour couvrir l'ensemble de la page visible

J'ai une page web qui se charge de certaines choses en utilisant AJAX. Je veux afficher une superposition avec un indicateur de chargement tandis que le chargement est en cours, de sorte que l'utilisateur ne peut pas interagir avec la plupart de la page - à l'exception de la barre de menu en haut. Je suis à l'aide de jQuery et de jQuery plugin BlockUI pour ce faire.

J'appelle $(element).bloc() et il fonctionne très bien, mais la superposition seulement s'étend aussi loin que le contenu de ma page. Comme de plus en plus le contenu est chargé et ajouté à la page de la superposition se déplace vers le bas avec elle, et c'est un peu laid. Idéalement, j'aimerais qu'il couvre l'ensemble de la zone visible de la page de droite dès le début. Un simple hack pour ce faire serait de créer une grande valeur de la hauteur de la superposition, comme ceci:

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

... mais cela crée une barre de défilement! Comment puis-je éviter cela et de le rendre juste la bonne hauteur pour couvrir la page visible, mais pas l'agrandir?

OriginalL'auteur EMP | 2010-03-29

  1. 23

    Utilisation position: fixed; au lieu de position: absolute. De cette façon, la superposition va pas bouger, même si vous faites défiler.

    Mec merci pour cette réponse. Ce problème a été me rend fou!
    position fixe est la solution, et si la page est en utilisant les en-têtes et pieds de page chargée dynamiquement/ajouté par un autre modèle, assurez-vous de placer la superposition de la div au bon endroit, de sorte qu'il couvre l'en-tête et pied de page, ainsi...

    OriginalL'auteur caruzko

  2. 2

    En XHTML, html et des éléments du corps ne sont pas aussi magique que dans HTML. L'élément de corps de ne pas remplir la fenêtre d'affichage (fenêtre) automatiquement, sa taille est seulement aussi grand que son contenu.

    Pour en faire un élément de remplissage de la fenêtre, vous devez d'abord faire de l'html et des éléments du corps de remplissage de la fenêtre:

    html, body { height: 100%; }

    Ensuite, vous pouvez utiliser height: 100%; sur un élément dans le corps afin qu'il couvre toute la hauteur.

    L'explication du sens et il avait l'air prometteur, mais ne fonctionne pas sur ma page. Je pense que c'est parce qu'il utilise jQuery UI tabs, chargé dynamiquement et je soupçonne que chaque élément de <html> vers le bas doit avoir "height: 100%" ensemble.

    OriginalL'auteur Guffa

  3. 0

    Ensemble position à absolute et à hauteur de 100%.

    Nope, n'aide pas - ceux qui sont déjà définis par BlockUI.

    OriginalL'auteur Daniel A. White

  4. 0

    J'ai fait un exemple complet pour vous, maintenant vous pouvez l'utiliser dans votre application et et à se cacher après une requête ajax terminé.

    Cliquez sur ici!

    <div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>

    OriginalL'auteur safkass

  5. 0

    Le code suivant a fini par travailler pour moi:

    $("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

    J'ai utilisé le post suivant comme référence: Faire des div à 100% de la hauteur de la fenêtre du navigateur
    la seule modification que j'avais à faire était ajout de gauche et de droite. Mon overlay ne couvrant que la moitié de l'écran.

    OriginalL'auteur Kremena Lalova