Абсолютное положение + прокрутка

Со следующими HTMLи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>

Внутренняя divчасть по желанию занимает всю головку контейнера. Если я сейчас добавлю в контейнер какой-нибудь другой, поток, контент, например:

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

Затем контейнер прокручивается по желанию, однако абсолютно позиционированный элемент больше не прикрепляется к дну контейнера, а останавливается на начальном видимом дне контейнера. У меня вопрос; есть ли способ, чтобы абсолютно позиционированный элемент был полной высотой прокрутки своего контейнера без использования JS?

Вам нужно обернуть текст в divэлемент и включить в него абсолютно позиционированный элемент.

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

Установка relativeположения внутреннего блока div в положение делает элементы абсолютного положения внутри него основанием для своего положения и высоты на нем, а не на .containerdiv, который имеет фиксированную высоту. Без внутреннего, относительно позиционированного div, .full-heightdiv всегда будет вычислять свои размеры и положение на основе .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;решит вашу проблему. В качестве примера рассмотрим мою реализацию наложения фиксированной области сообщения (заполняемой программно):

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

А в HTML

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

Когда экран #dataстановится длиннее, #messсохраняет свое положение на экране, пока #dataпрокручивается под ним.

Итак, gaiour прав, но если вы ищете элемент в полную высоту, который не прокручивается вместе с содержимым, а фактически является высотой контейнера, вот исправление. Имейте родительский элемент с высотой, вызывающей переполнение, контейнер содержимого, который имеет высоту 100% overflow: scroll, и тогда родственный брат может быть расположен в соответствии с размером родительского элемента, а не размером элемента прокрутки. Вот скрипка: http://jsfiddle.net/M5cTN/196/

и соответствующий код:

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

Я столкнулся с этой ситуацией, и создание лишнего div было непрактичным. В итоге я просто установил full-heightdiv наheight: 10000%; overflow: hidden;

Конечно, не самое чистое решение, но работает очень быстро.