Div avec la barre de défilement à l'intérieur de div avec position:fixed

J'ai un div avec position:fixed, c'est mon div conteneur pour certains menus. Je l'ai mis de top:0px, bottom:0px toujours remplir la fenêtre d'affichage. À l'intérieur de div que je veux avoir 2 autres divs, l'un en bas qui contient beaucoup de lignes et a overflow:auto. Je m'attends à ce qu'elle serait contenue dans le div conteneur, mais si il y a trop de lignes simplement, il se développe en dehors de l'fixe div. Ci-dessous mon code et une capture d'écran de préciser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

Div avec la barre de défilement à l'intérieur de div avec position:fixed

Est-il de toute façon pour moi de faire cela? Encore une fois, je veux #innerstatic2 être correctement contenues dans #outerfixed et obtenir des barres de défilement si il est plus grand que l'espace dont il dispose à l'intérieur de #outerfixed.

Je sais qu'il y a quelques possibilités de hack en en fixant #innerstatic2, mais je voudrais vraiment qu'il soit au sein de l'écoulement à l'intérieur de #outerfixed si possible, de sorte que si je déplace #outerfixed quelque part, à l'intérieur de l'élément viendrait avec elle.

EDIT: je sais que je peux le mettre overflow:auto sur le #outerfixed et obtenir une barre de défilement sur l'ensemble de la chose, mais j'ai particulièrement envie d'une barre de défilement juste sur #innerstatic2, c'est une grille et je veux faire défiler juste la grille.

Quelqu'un? Possible?

InformationsquelleAutor Einar Egilsson | 2010-10-01
  1. 39

    Il y a une solution en deux étapes pour cela, mais il arrive à quelque chose d'un coût:

    1. Ajouter overflow-y: scroll; à la css pour #innerstatic2.
    2. définir un height (ou max-height) pour #innerstatic2, sinon il ne de débordement, il va tout simplement continuer à augmenter sa hauteur (la valeur par défaut pour un div est height: auto).

    Édité parce que je ne peux pas arrêter de moi-même, parfois.

    J'ai posté une démo sur jsbin de montrer un jQuery mise en œuvre de ce qui va calculer un height pour vous (ce n'est pas généralisé, il travaille uniquement avec votre html en cours).

    (function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),
        offset = $('#innerstatic2').offset(),
        topOfInnerstatic2 = offset.top,
        potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);
    • Merci pour la réponse. En fait c'est à peu près ce que nous avons aujourd'hui, calculer la bonne hauteur pour #innerstatic2 avec jquery. Mais c'est à l'origine des problèmes avec des composants tiers qui calcule une taille incorrecte lorsque nous gâcher, avec ce document prêt, c'est pourquoi je voulais vraiment un pur CSS solution.
    • Alors, est-il aucun moyen de forcer l'défiler sur #innerstatic2 par le réglage de la hauteur sur #outerfixed? De ce que j'ai essayé il ne semble pas, #innerstatic2, tout s'enchaîne à l'extérieur si j'ai mis explicite de la hauteur sur #outerfixed, mais est-ce parce qu'il est en position fixe?
    • Elle pourrait l'être. Vous pouvez également ajouter overflow: hidden à la css pour #outerfixed, mais cela ne veut pas regard particulièrement jolie, malheureusement.
    InformationsquelleAutor David Thomas
  2. 18

    Je l'ai résolu en donnant la position absolue de l'ul et de la hauteur de 100%

    ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

    découvrez ce VIOLON

    • Cette solution se cache l'extrémité inférieure de la ul (il se complique pas montrer la dernière li exemple)
    • merci, m'a sauvé la vie 🙂
    InformationsquelleAutor Ofir D
  3. 5

    overflow-y:scroll;

    Et d'ajouter ce pour les appareils iOS. Il donne un meilleur défilement de l'utilisation du tactile. L'overflow-y doit être de défilement! pour sécuriser les raisons. auto coutume de travail pour certaines personnes. ou, au moins, c'est ce que j'ai entendu.

    -webkit-overflow-scrolling: touch;

    InformationsquelleAutor Dyrehauge
  4. 2

    vous devez définir la hauteur pour outerfixed et max-height pour innerstatic2

    voir ce qui pourrait être utile DÉMO

    InformationsquelleAutor Afshin
  5. 1

    C'est le div conteneur qui doit être avec le overflow:auto attribut. Dans ce cas, le #outerfixed div

    • Désolé, j'aurais dû être plus clair. Je souhaitez explicitement la barre de défilement pour le #innerstatic2 élément. C'est une grille et je veux faire défiler uniquement la grille, pas tout le contenant.
    InformationsquelleAutor Alejandro Martin
  6. 1

    La seule manière de la figure, est de innerstatic2 de position absolue (de sorte que vous pouvez utiliser le haut et le bas de la taille par rapport à outerfixed), puis à l'intérieur de innerstatic2 créer un autre div où vous mettez votre texte. Ensuite vous donner innerstatic2 le "overflow: auto;" indication. L'inconvénient de cette méthode, qui innerstatic2 ne se déplace pas vers le bas, lorsque innerstatic1 grandit, car c'est la position absolument. Si elle a besoin de se déplacer, elle doit être "position: relative", mais ensuite, vous devez définir une hauteur fixe pour elle. Donc de toute façon vous avez à régler pour un compromis.

    Une fois tous les navigateurs supportent CSS3, comme le calcul de soutien, il y aura de meilleures options pour ce faire, sans ces inconvénients.

    InformationsquelleAutor Eric J. Francois
  7. 1

    Pas idéal, mais cela devrait vous obtenez 90% de la manière

    <div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>
    InformationsquelleAutor SooDesuNe