Position absolue + défilement

Avec ce qui suit HTMLetCSS

.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 divoccupe toute la tête du récipient comme souhaité. 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é, cependant l'élément positionné de manière absolue n'est plus ancré au fond du conteneur mais s'arrête au fond visible initial du conteneur. Ma question est; y a-t-il un moyen d'avoir l'élément positionné de manière absolue à la hauteur de défilement complète de son conteneur sans utiliser JS?

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

<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 interne sur relativefait que les éléments de position absolue à l'intérieur de celui-ci basent leur position et leur hauteur sur elle plutôt que sur la .containerdiv, qui a une hauteur fixe. Sans l'intérieur, relativement positionné div, le .full-heightdiv calculera toujours ses dimensions et sa position en fonction 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/

position: fixed;résoudra votre problème. À titre d'exemple, passez en revue ma mise en œuvre d'une superposition de zone de message fixe (remplie 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 #datadevient plus long que l'écran, #messgarde sa position sur l'écran, tout en #datadéfilant en dessous.

Donc gaiour a raison, mais si vous recherchez un élément pleine hauteur qui ne défile pas avec le contenu, mais qui est en fait la hauteur du conteneur, voici le correctif. Avoir un parent avec une hauteur qui provoque un débordement, un conteneur de contenu qui a une hauteur de 100% et overflow: scroll, et un frère peuvent alors être positionnés en fonction de la taille du parent, pas de la taille de l'élément de défilement. Voici le violon: 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%;
}

Je suis tombé sur cette situation et créer un div supplémentaire n'était pas pratique. J'ai fini par configurer le full-heightdiv surheight: 10000%; overflow: hidden;

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