Posição Absoluta + Rolagem

Com o seguinte HTMLeCSS

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

O interior divocupa toda a parte superior do recipiente conforme desejado. Se eu adicionar algum outro conteúdo de fluxo ao contêiner, 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>

Em seguida, o contêiner rola conforme desejado, no entanto, o elemento posicionado absolutamente não está mais ancorado ao fundo do contêiner, mas para no fundo visível inicial do contêiner. Minha pergunta é; existe alguma maneira de ter o elemento posicionado absolutamente ser a altura de rolagem completa de seu contêiner sem usar JS?

Você precisa quebrar o texto em um divelemento e incluir o elemento posicionado absolutamente dentro dele.

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

Definir a posição do div interno relativefaz com que os elementos de posição absolutamente dentro dele baseiem sua posição e altura nele em vez de no .containerdiv, que tem uma altura fixa. Sem o interno, relativamente posicionado div, o .full-heightdiv sempre calculará suas dimensões e posição com base em .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;vai resolver seu problema. Como exemplo, analise minha implementação de uma sobreposição de área de mensagem fixa (preenchida de forma programática):

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

E no HTML

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

Quando #datafica mais longo que a #messtela, mantém sua posição na tela, enquanto #datarola abaixo dela.

Portanto, gaiour está certo, mas se você está procurando um item de altura total que não rola com o conteúdo, mas é na verdade a altura do contêiner, aqui está a correção. Tenha um pai com uma altura que causa estouro, um contêiner de conteúdo que tem 100% de altura overflow: scrolle um irmão pode ser posicionado de acordo com o tamanho do pai, não o tamanho do elemento de rolagem. Aqui está o violino: http://jsfiddle.net/M5cTN/196/

e o código relevante:

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

Corri para essa situação e criar um div extra foi impraticável. Acabei definindo o full-heightdiv paraheight: 10000%; overflow: hidden;

Claramente não é a solução mais limpa, mas funciona muito rápido.