Réglage de 100% de la hauteur sur une position absolue de l'élément lorsque le contenu se développe passé la taille de la fenêtre

Donc, après la lecture de Débordement de Pile et le web, j'ai recueilli il y a deux principales astuces pour parvenir à 100% de la hauteur:

  1. Hauteur:100% sur le HTML et le CORPS
  2. Définir votre élément pour avoir soit:
    • hauteur:100%, ou
    • haut:0, bas:0, position:absolute

Cependant, même avec ces astuces, je vais avoir de la difficulté à réglage de la hauteur d'une position absolue DIV à 100% vrai. Je peux obtenir 100% de la taille de la fenêtre, mais si l'utilisateur fait défiler à tous, il devient évident que la div ne pas vraiment avoir 100% de hauteur.

J'ai fait un simple JS Fiddle de la situation ici:
http://jsfiddle.net/9FEne/

Ma question est: est-ce que quelqu'un sait toute les astuces pour obtenir un vrai (c'est à dire. contenu-hauteur, pas de fenêtre de la hauteur) 100% de la hauteur en position absolue div?

position: relative? top: 0; bottom:0 aurait aucun effet sur une position relative de l'élément.
non, ce ne serait pas... 🙂
Oh, eh bien peut-être que l'approche était censé utiliser position: absolute. Je sais juste qu'position:absolute n'est pas de travail pour moi, mais j'ai vu que top:0/bas:0 technique quelque part ...
Je suppose que ce que je voulais dire c'est, vous pouvez toujours appliquer la top, left etc propriétés pour les éléments en position relative. Je pense que ce que vous essayez de dire, c'est que la mise à 0 aurait pas d'effet puisque c'est à où il est dans le flux normal de toute façon.
ce n'est pas ce que nous disons à tous. Réglage à quoi que ce soit n'a aucun effet sur les éléments en position relative. Par défaut est "auto" (pas zéro) et la mise à zéro (ou autre chose) a un effet, mais uniquement si vous utilisez la position "absolute" ou "fixe".

OriginalL'auteur machineghost | 2012-04-13

  1. 11

    Désolé, j'ai raté la vraie question avant et pensais que tu voulais la fenêtre remplie. Si le problème est que le contenu est plus longue que la fenêtre, puis ce que vous avez besoin est d'ajouter position:relative pour le corps. http://jsfiddle.net/9FEne/7/

    Ce qui se passe est que lorsque vous avez absolument position de quelque chose, c'positions (et de taille) par rapport à la plus proche positionné sur l'élément. Si vous ne le dites pas à la position du corps, puis il sera à la position de la fenêtre.

    Il ne fonctionne pas vraiment si il n'y a pas ou trop peu de contenu pour remplir l'écran en hauteur. Vous pouvez également ajouter des height: 100%; sur les deux body et html éléments.

    OriginalL'auteur Prestaul

  2. 7

    Vous pouvez utiliser jQuery pour réaliser cette astuce

    var h = $(window).height();
$('#yourdiv').height(h);
    C'est un css question, pas un javascript question.
    Eh bien, vous a demandé si il y avait "toute autre astuces". javascript pourrait donner une solution facile à ce problème.
    Je vais dire la même chose que ce que j'ai dit à OnResolve: C'est assez juste, mais ce n'est pas difficile à résoudre avec les css et ajouter du code javascript dans le mélange introduit d'autres questions... E. g. ce qui se passe lorsque l'utilisateur redimensionne son navigateur?
    Aussi, vous avez raté le point de sa question. Il ne veut pas de la taille de la fenêtre. Il veut la taille du contenu de son document.
    Vous pouvez facilement détecter lorsque la fenêtre est redimensionnée avec jQuery aussi, utiliser le redimensionner() la méthode.

    OriginalL'auteur Trav McKinney

  3. 4

    Je voudrais utiliser javascript pour affecter la hauteur et la largeur de l'égalité de document de la hauteur et de la largeur de la fenêtre de respectivement; j'ai modifié votre jsfiddle démontrer ici:

    http://jsfiddle.net/9FEne/1/

    C'est un css question de bien et de pas un javascript question...
    En fait, si vous lisez sa question, il n'y a rien allusion au fait que sa solution doit être css uniquement. En fait on dirait qu'il est épuisé css et a encore besoin de la le résultat souhaité. Je ne sais pas pourquoi une autre solution vaut -1...me semble qu'il serait préférable d'avoir toutes les options présentées, non?
    C'est assez juste, mais ce n'est pas difficile à résoudre avec les css et ajouter du code javascript dans le mélange introduit d'autres questions... E. g. ce qui se passe lorsque l'utilisateur redimensionne son navigateur?
    Vous êtes tous les deux raison: je cherchais une pure CSS solution, mais je n'ai pas, de toute façon indiquent que directement dans la question d'origine. Je préfère encore une pure CSS solution, mais depuis, aucun n'a encore fait son apparition il ressemble JS peut être le seul moyen.

    OriginalL'auteur OnResolve