Абсолютна позиція + прокрутка

При наступному 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дозволяє зробити абсолютно позиційні елементи всередині нього виходячи з них свого положення та висоти, а не на .containerдіві, який має фіксовану висоту. Без внутрішнього, відносно розташованого div, .full-heightдів завжди обчислює свої розміри та положення на основі .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прокручуючи під нею.

Тож гайоур має рацію, але якщо ви шукаєте предмет на повну висоту, який не прокручується вмістом, а насправді є висотою контейнера, ось це виправлення. Майте батьків з висотою, яка викликає переповнення, контейнер із вмістом, який має 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%;
}

Я зіткнувся з цією ситуацією, і створити додаткову діву було недоцільно. Я закінчила лише встановлення full-heightдіваheight: 10000%; overflow: hidden;

Очевидно, що не найчистіше рішення, але воно працює дуже швидко.