position:absolute; bottom: 0; ne fonctionne pas comme prévu dans IE7

mon site, un outil de catalogue de cours pour les universités, a un volet central qui contient une liste de cours Mise à jour dynamiquement. Dans Firefox, Opera et Chrome, le panneau central a le comportement de défilement prévu: lorsque la liste des classes dépasse la hauteur, le panneau central a une barre de défilement. IE, cependant, ne montre cette barre que lorsque la hauteur est explicitement définie. Sans utiliser JavaScript pour réinitialiser la hauteur du panneau central sur Redimensionner, Comment puis-je forcer Internet Explorer à afficher le rouleau bar?

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%;
}

on dirait que la vitre centrale n'obéit pas à la bottom: 0px; déclaration, et s'étend à toute la hauteur du contenu #courselist. J'ai essayé body { height: 100% } mais ça ne l'a pas réparé non plus.

14
demandé sur Cody Guldner 2009-07-08 01:42:11

6 réponses

"top la propriété l'emporte sur le bottom propriété..." https://developer.mozilla.org/en-US/docs/CSS/bottom

Modifier topauto au lieu de 0px:

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

qui devrait fixer le positionnement du bas. Rappelez-vous, si #middlenav est positionné absolument, il sera relatif à tout élément parent ayant position:absolute; ou position:relative;. Si #middlenav n'a aucun élément parent qui est positionné, il sera relatif <body>.

Je ne sais pas pourquoi vous avez #courselist absolument positionné; puisqu'il est à l'intérieur de #middlenav je pense que vous pourriez le laisser statique ou le positionner relativement. Mais indépendamment de ce que vous faites, je pense que vous avez besoin d'une hauteur #courselist ou #middlenav. La valeur par défaut de la hauteur est auto, donc il n'y aura pas de barre de défilement parce que l'élément se développera pour s'adapter à son contenu.

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

8
répondu namklabs 2013-03-21 17:00:42

bien qu'il soit parfaitement acceptable de placer des bords opposés lors de l'utilisation du positionnement absolu dans CSS, les limites d'Internet Explorer signifient que l'approche peut ne pas fonctionner là.

il n'y a aucun moyen d'éviter le bogue dans Internet Explorer 6. Dans Internet Explorer 7 et les versions plus récentes, le déclenchement du Mode Standards résoudra le problème.

la simulation de colonnes qui s'étendent jusqu'au bas d'un élément est habituellement réalisée en utilisant fausses colonnes.

3
répondu Quentin 2010-08-21 10:21:58

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 l'avez dans un autre élément positionné en bas: 0px; alors il ne sait pas où est le fond, à moins que l'un de ces éléments est à l'intérieur (prenant la pleine hauteur de) et l'élément avec une taille fixe. On ne peut pas donner au corps une hauteur de 100% parce que ça ne peut pas durer éternellement. Essayez de spécifier la hauteur de la corps ou un élément conteneur. : D

1
répondu Gordon Gustafson 2009-07-07 22:11:24

assurez-vous que votre doctype est défini à HTML strict, sinon IE va se comporter excentrique et se confondre avec entre autres le positionnement et les débordements.

ce Ajouter en haut de votre page:

<!DOCTYPE html>
1
répondu BalusC 2012-11-21 01:06:14

Je ne suis pas tout à fait sûr si je comprends parfaitement mais je pense que vous voulez que la vitre centrale défile quand elle atteint une certaine hauteur..c'est la façon dont je le ferais. 

#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 paramètre définit votre liste de cours dans tous les navigateurs à une hauteur minimale de 400, une fois que cela est passé une barre de défilement apparaît. la hauteur minimale n'est pas supportée dans IE7 et plus bas donc j'ai utilisé le HACK_HEIGHT 400 D'IE donc il agit comme une hauteur minimale. overflow-x: hidden cache le rouleau horizontal juste au cas où vous ne voulez que vertical. J'espère que cela vous aide.

0
répondu briank 2011-07-29 05:34:23

n'utilisez pas le positionnement du haut et du bas dans la même classe et n'utilisez pas le positionnement droit et gauche dans la même classe, car ce sont des valeurs contradictoires.

-10
répondu Navi 2011-12-17 04:33:55