Posición Absoluta + Desplazamiento

Con lo siguiente HTMLyCSS

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

El interior divocupa la cabeza completa del recipiente como se desee. Si ahora agrego algún otro contenido de flujo al contenedor, como:

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

Luego, el contenedor se desplaza como se desee, sin embargo, el elemento absolutamente posicionado ya no está anclado al fondo del contenedor, sino que se detiene en el fondo visible inicial del contenedor. Mi pregunta es; ¿Hay alguna forma de que el elemento absolutamente posicionado tenga la altura de desplazamiento completa de su contenedor sin usarlo JS?

Debe envolver el texto en un divelemento e incluir el elemento absolutamente posicionado dentro de él.

<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%; }

Establecer la posición del div interno relativehace que los elementos de posición absoluta dentro de él basen su posición y altura en él en lugar de en el .containerdiv, que tiene una altura fija. Sin el interior, relativamente posicionado div, el .full-heightdiv siempre calculará sus dimensiones y posición basándose en .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;resolverá tu problema. Como ejemplo, revise mi implementación de una superposición de área de mensajes fija (poblada mediante programación):

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

Y en el HTML

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

Cuando #datase alarga la pantalla, #messmantiene su posición en la pantalla, mientras se #datadesplaza por debajo de ella.

Así que gaiour tiene razón, pero si está buscando un elemento de altura completa que no se desplace con el contenido, pero que en realidad sea la altura del contenedor, aquí está la solución. Tener un padre con una altura que provoque desbordamiento, un contenedor de contenido que tenga una altura del 100% overflow: scrolly un hermano que se pueda colocar de acuerdo con el tamaño del padre, no el tamaño del elemento de desplazamiento. Aquí está el violín: http://jsfiddle.net/M5cTN/196/

y el código correspondiente:

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%;
}

Me encontré con esta situación y crear un div extra no fue práctico. Terminé configurando el full-heightdiv enheight: 10000%; overflow: hidden;

Claramente no es la solución más limpia, pero funciona muy rápido.