Comment mettre une div auto ajuster la hauteur de votre navigateur internet disponible hauteur

J'ai un div ( position :fixed), avec des variations de hauteur en fonction du contenu en elle. Pour avoir un défilement automatique pour ce que j'ai ajouté overflow-y:auto et affecté à une hauteur fixe.

Est-il un moyen de réglage automatique de la hauteur de la div, de sorte que lorsque le navigateur de l'espace est modifié, la hauteur de la div changements en conséquence, et si il n'y a pas assez d'espace de la barre de défilement s'affiche et quand il y a assez d'espace disponible, la barre de défilement disparaît.

InformationsquelleAutor | 2011-05-17
  1. 5

    utilisation position:absolute au lieu de position: fixed et utiliser le haut à gauche, à droite et en bas coordonne et régler le défilement automatique;

    exemple HTML:

    <div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

    CSS:

    #resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

    De Travail Exemple : Ici

    • Merci beaucoup..j'ai pu comprendre ce qui se passe...il est seulement question est en haut et à gauche les valeurs doivent être affectées à ce travail...la position de la div d'intérêt peut varier en haut à gauche de la position...comment pouvons-nous l'adresse que..que j'ai pu obtenir une solution de contournement à l'aide de @dtbarne solution..mais qui a besoin de js pour exécuter
    InformationsquelleAutor clairesuzy
  2. 2

    Utiliser deux DIVs, un imbriquée à l'intérieur de l'autre.

    La DIV extérieure doit être réglé à position:fixed;max-height:100%;overflow-y:auto

    L'intérieur DIV contiendra le contenu de votre. Autant que je puisse dire, il ne nécessitera pas de tout styles spécifiques.

    Ce qui doit arriver (et ce qui se passe quand je test ce correctif dans mon navigateur), c'est que la DIV extérieure doit shrink-wrap pour s'adapter à l'intérieur de la DIV -- mais il ne dépassera pas la hauteur de la fenêtre. Si l'intérieur de la DIV dépasse la hauteur de la fenêtre, il permettra également de dépasser la hauteur de la DIV extérieure, la production d'une barre de défilement.

    EDIT: Exemple de balisage:

    <div id="outer">
   <div class="inner">
      Content goes here.
   </div>
</div>

    Et le CSS:

    #outer{
   position:fixed;
   max-height:100%;
   overflow-y:auto;
   bottom:0; /* sample value */
   left:0;   /* sample value */
}
#outer div.inner{
   /* Whatever style you want the positioned box
      to have. Border, padding, background, etc. */
}
    • cela fonctionne soigné..j'ai eu à utiliser max-hauteur un peu moindre valeur, de sorte que le contenu n'est pas aller hors de la vue du port..merci beaucoup pour la solution élégante
    InformationsquelleAutor DavidJCobb
  3. 1

    Vous pouvez écouter l'événement de redimensionnement de la fenêtre et de la mise à jour de la largeur en conséquence.

    $(window).resize(function() {

});

    http://api.jquery.com/resize/

    Alternativement, selon la disposition de votre page, vous pourriez être en mesure de l'utiliser juste height: 100% (ou un autre % qui fonctionne pour vous).

    • Merci beaucoup..j'ai pu trouver une solution à l'aide de redimensionner..il suffit de regarder l'autre option à l'aide de pur css....
    InformationsquelleAutor dtbarne