& lt; div & gt; position: absolue; en bas: 0; ne fonctionne pas comme prévu dans IE7

Mon site, un catalogue des cours de l'outil à l'intention des universités, a un volet central qui contient une mise à jour dynamiquement la liste des classes. Dans Firefox, Opera et Chrome, le volet central a pour but le comportement de défilement: lorsque la liste de la classe dépasse la hauteur, le volet central a une barre de défilement. C'est à dire, cependant, ne montre que ce bar lorsque la hauteur est définie de façon explicite. Sans l'aide de JavaScript pour réinitialiser le volet central de la hauteur sur redimensionner, comment puis-je la force d'Internet Explorer pour afficher la barre de défilement?

Le volet central:

<div id="middlenav">
    <div id="middleheader"></div>
    <div id="courselist"></div>
</div>

et son CSS:

div#middlenav {
    position: absolute;
    left: 250px;
    right: 350px;
    top: 0px;
    bottom: 0px;
}

div#courselist {
    overflow: auto;
    position: absolute;
    top: 55px;
    bottom: 0px;
    width: 100%;
}

Il ressemble le volet central n'est pas l'obéissance à la bottom: 0px; déclaration, et s'étend à toute la hauteur de l'contenues #courselist. J'ai essayé body { height: 100% } mais qui n'ont pas le fixer.

source d'informationauteur

  1. 8

    "La top propriété remplace la bottom de la propriété..."
    https://developer.mozilla.org/en-US/docs/CSS/bottom

    Changement top à auto au lieu de 0px:

    div#middlenav
{
    position: absolute;
    left: 250px;
    right: 350px;
    top: auto;
    bottom: 0px;
}

    Cela devrait résoudre le bas de positionnement. Rappelez-vous, si #middlenav est en position absolue, il sera par rapport à celle élément parent a position:absolute; ou position:relative;. Si #middlenav n'a pas de parent éléments qui sont positionnés, il sera par rapport à <body>.

    Je ne suis pas sûr de savoir pourquoi vous avez #courselist en position absolue; car il est à l'intérieur de #middlenav je pense que vous pourriez le laisser statique ou de la position relativement. Mais indépendamment de ce que vous faites, je pense que vous avez besoin d'une hauteur définie sur #courselist ou #middlenav. La valeur par défaut de la hauteur est automatique, donc il n'y aura pas de barre de défilement parce que l'élément sera élargi pour s'adapter à son contenu.

    Je sais que cette question a été posée il y a 3 ans, mais je poste pour d'autres personnes qui peuvent avoir un problème avec le CSS de positionnement. Cheers!

  2. 3

    Alors qu'il est parfaitement acceptable d'ensemble d'arêtes opposées lors de l'utilisation de la précision de positionnement en CSS, les limitations dans Internet Explorer signifie que l'approche ne peut pas y travailler.

    Il n'y a aucun moyen d'éviter le bug dans Internet Explorer 6. Dans Internet Explorer 7 et versions plus récentes, le déclenchement des Normes Mode de résoudre le problème.

    De truquer les colonnes qui s'étendent vers le bas d'un élément est généralement réalisé à l'aide de faux colonnes.

  3. 1

    position: absolute; bottom: 0px; définit l'élément à droite sur le bas de l'élément. Mais il doit savoir où le fond de l'élément. Si vous réglez la hauteur à 100% ou à un autre élément positionné en bas: 0px; Puis il ne sait pas où le fond est, à moins que l'un de ces éléments est à l'intérieur (en prenant de la hauteur totale) et de l'élément avec une taille fixe. Vous ne pouvez pas donner le corps d'une hauteur de 100%, car il aurait suffit d'aller à l'infini. Essayez de spécifier la hauteur du corps ou un élément conteneur. 😀

  4. 1

    De s'assurer que votre doctype est mis à HTML strictsinon IE ne se comportent bizarre pour se confondre avec entre autres, le positionnement et les débordements.

    Ce ajouter en haut de votre page:

    <!DOCTYPE html>
  5. 0

    Je ne suis pas sûr si je comprends tout à fait mais je pense que vous voulez le volet central de défilement quand cela va au-delà d'une certaine hauteur..c'est comment j'allais le faire. 

    #middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
              overflow:scroll; overflow-x:hidden; width:500px; }

    Ce qui permet à votre liste de cours dans tous les navigateurs à une hauteur minimale de 400, une fois que c'est passé à une barre de défilement s'affiche. min-height n'est pas pris en charge dans IE7 et inférieur, j'ai donc utilisé le hack IE _height 400 de sorte qu'il agit comme une hauteur min. overflow-x:hidden est de cacher la barre de défilement horizontale juste au cas où vous ne voulez verticale. J'espère que cela vous aide.

  6. -10

    Ne pas utiliser en haut et en bas de positionnement dans la même classe et ne pas utiliser de droite et de gauche, de positionnement dans la même catégorie, ils sont des valeurs contradictoires les uns aux autres.