Position absolue + défilement

Question

Avec les éléments suivants HTML y CSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

L'intérieur div occupe toute la tête du conteneur, selon les besoins. Si j'ajoute maintenant un autre contenu, un flux, au conteneur, tel que :

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

Ensuite, le conteneur défile comme souhaité, mais l'élément positionné de manière absolue n'est plus ancré au fond du conteneur, mais s'arrête au fond initial visible du conteneur. Ma question est la suivante : existe-t-il un moyen de faire en sorte que l'élément positionné de manière absolue ait la hauteur de défilement complète de son conteneur sans utiliser la fonction JS ?

Answer 1

Vous devez envelopper le texte dans un div et inclure l'élément absolument positionné à l'intérieur de celui-ci.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css :

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

Définir la position de la div intérieure à relative fait en sorte que les éléments à position absolue qui se trouvent à l'intérieur basent leur position et leur hauteur sur lui plutôt que sur la balise .container div, qui a une hauteur fixe. Sans l'élément interne, positionné de manière relative div le .full-height div calculera toujours ses dimensions et sa position sur la base de .container .

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

http://jsfiddle.net/M5cTN/

Answer 2

position: fixed; résoudra votre problème. À titre d'exemple, examinez ma mise en œuvre d'une zone de message fixe superposée (alimentée par programme) :

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

Et dans le HTML

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

Quand #data devient plus long que l'écran, #mess conserve sa position à l'écran, tandis que #data défile sous elle.

Answer 3

Gaiour a donc raison, mais si vous cherchez un élément de pleine hauteur qui ne défile pas avec le contenu, mais qui est en fait de la hauteur du conteneur, voici la solution. Disposez d'un parent dont la hauteur provoque un débordement, d'un conteneur de contenu dont la hauteur est de 100 % et d'un élément qui ne défile pas avec le contenu. overflow: scroll et un élément frère peut alors être positionné en fonction de la taille du parent, et non de la taille de l'élément défilant. Voici l'astuce : http://jsfiddle.net/M5cTN/196/

et le code correspondant :

html :

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

css :

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}

Answer 4

J'ai rencontré cette situation et la création d'un div supplémentaire n'était pas pratique. J'ai fini par simplement définir le full-height div à height: 10000%; overflow: hidden;

Ce n'est clairement pas la solution la plus propre, mais elle fonctionne très rapidement.

Answer 5

Non pas qu'il y ait quelque chose de mal avec les autres réponses, mais juste pour le plaisir, j'ai copié le fragment original et tout ce que j'ai changé c'est que height a min-height et je n'ai pas eu à ajouter un autre <div> n'importe où.

.container {
  position: relative;
  border: solid 1px red;
  min-height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>