web-dev-qa-db-fra.com

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

J'ai un div avec la position: fixed qui est mon conteneur div pour certains menus. Je l'ai mis en haut: 0px, en bas: 0px pour toujours remplir la fenêtre. Dans ce div, je veux avoir 2 autres divs, le plus bas contient beaucoup de lignes et a débordement: auto. Je m'attendrais à ce qu'il soit contenu dans le conteneur div, mais s'il y a trop de lignes, il se dilate simplement en dehors du div fixe. Ci-dessous, mon code et une capture d'écran pour clarifier:

<!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>

alt text

Y at-il un moyen pour moi de faire cela? Encore une fois, je veux que # innerstatic2 soit correctement contenu dans #outerfixed et obtienne des barres de défilement s'il devient plus grand que l'espace disponible à l'intérieur de #outerfixed.

Je sais qu'il existe quelques possibilités pour résoudre ce problème en corrigeant également # innerstatic2, mais j'aimerais vraiment que cela soit dans le flux à l'intérieur de #outerfixed si possible, de sorte que si je déplace #outfixé quelque part, l'élément interne le suivra.

EDIT: Je sais que je peux définir overflow: auto sur #outerfixed et obtenir une barre de défilement sur tout le contenu, mais je veux spécifiquement une barre de défilement juste sur # innerstatic2, c’est une grille et je veux faire défiler la grille uniquement.

N'importe qui? Possible?

csscss-position
37
Einar Egilsson

Il existe une solution en deux étapes pour cela, mais elle a un coût:

  1. Ajoutez overflow-y: scroll; au fichier CSS pour #innerstatic2.
  2. définissez une height (ou max-height) pour #innerstatic2, sinon ne débordera pas, sa hauteur augmentera continuellement (la valeur par défaut pour div est height: auto).

Edited parce que je ne peux tout simplement pas m'en empêcher, parfois.

J'ai posté une démo sur jsbin pour montrer une implémentation jQuery qui calculera une height pour vous (ce n'est pas généralisé, donc cela ne fonctionnera qu'avec votre code HTML actuel).

(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();
    }
);
36
David Thomas

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

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

Découvrez ce FIDDLE

16
Ofir D

overflow-y:scroll;

Et ajoutez ceci pour les appareils iOS. Cela donne un meilleur défilement en utilisant le toucher. Le débordement doit être faire défiler! pour des raisons sécurisées. auto ne fonctionnera pas pour certaines personnes. ou du moins c'est ce que j'ai entendu.

-webkit-overflow-scrolling: touch;

4
Dyrehauge

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

voir cela pourrait être utile DEMO

2
Afshin

Pas idéal, mais cela devrait vous rendre 90% de leur chemin

<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>
1
SooDesuNe

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

1
Alejandro Martin

La seule façon dont je figure est de placer innerstatic2 en position absolue (pour que vous puissiez utiliser top et bottom pour le dimensionner par rapport à outerfixed ), puis dans innerstatic2 créer un autre div mettez votre texte po Ensuite, vous donnez innerstatic2 le "débordement: auto;" indication. L'inconvénient de cette méthode est qu'Innerstatic2 ne descend pas quand Innerstatic1 se développe, car il doit être positionné absolument. Si elle doit être déplacée, il doit s'agir de "position: relative", mais vous devez alors définir une hauteur fixe. Donc, de toute façon, vous devez vous contenter d'un compromis.

Une fois que tous les navigateurs auront pris en charge les nouvelles fonctionnalités de CSS3, telles que la prise en charge des calculs, de meilleures options pour le faire, sans ces inconvénients.

1
Eric J. Francois