web-dev-qa-db-fra.com

Position CSS: collant et débordant

Impossible de trouver la solution pour cela. Fondamentalement, ce que j'essaie de réaliser, c'est d'avoir un élément avec le position: sticky apparaît avec une barre de défilement s'il y a plus de contenu que la hauteur du navigateur.

Je ne veux pas utiliser position: fixed car cela ajoutera une douleur supplémentaire dans le cou.

Voici l'exemple de la façon dont je m'attendrais à ce que cela fonctionne:

.placeholder {
  height: 200vh;
  width: 50%;
  float: right;
}

.child {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
}
<div class="parent">
  <div class="placeholder"></div>
  <div class="child">
    some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br />

  </div>
</div>

Violon 1

Voici un exemple avec le position: sticky où le overflow ne fait rien:

.placeholder {
  height: 200vh;
  width: 50%;
  float: right;
}

.child {
  position: sticky;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
}
<div class="parent">
  <div class="placeholder"></div>
  <div class="child">
    some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  
  </div>  
</div>

Violon 2

Toute explication/solution appréciée.

Assurez-vous d'utiliser Firefox lors des tests

csscss-position
11
Morpheus

Il est important de comprendre que les éléments sticky sont d'abord traités comme un élément relative et puis un fixed élément (voir MDN ). Par conséquent, vous devez d'abord le regarder comme un élément relatif. Si vous donnez une hauteur de 100% à un élément relatif, alors rien ne se passe vraiment à moins que son élément parent ait une hauteur définie.

Si vous voulez que votre élément collant ait également une barre de défilement, vous devez lui donner une hauteur significative. Je suggère d'utiliser la hauteur de la fenêtre d'affichage:

.child {
  position: sticky;
  top: 0;
  bottom: 0;
  height: 50vh;
  overflow-y: auto;
}

Pour mémoire - le "caractère collant" ne semble pas fonctionner comme prévu dans FF ou Safari en termes d'élément devenant fixed pendant le défilement. Je ne me préoccupe pas de cela - je me concentre uniquement sur la question du débordement.

16
Ryan Wheale