Pozycja bezwzględna + przewijanie

Z następującymi HTMLiCSS

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

W razie divpotrzeby wnętrze zajmuje całą głowę pojemnika. Jeśli teraz dodam inną, flow, zawartość do kontenera, taką jak:

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

Następnie pojemnik przewija się zgodnie z potrzebą, jednakże element pozycjonowany absolutnie nie jest już zakotwiczony na dnie pojemnika, ale zatrzymuje się na początkowo widocznym dnie pojemnika. Moje pytanie brzmi; czy istnieje sposób, aby element pozycjonowany absolutnie był pełną wysokością przewijania swojego kontenera bez użycia JS?

Musisz zawinąć tekst w divelement i umieścić wewnątrz niego element pozycjonowany absolutnie.

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

Ustawienie pozycji wewnętrznego elementu DIV tak, aby relativeabsolutnie pozycjonować elementy wewnątrz niego, oprze swoją pozycję i wysokość na nim, a nie na elemencie .containerdiv, który ma stałą wysokość. Bez wewnętrznego, względnie umiejscowionego divelementu .full-heightdiv zawsze obliczy swoje wymiary i położenie na podstawie .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;rozwiąże Twój problem. Jako przykład, przejrzyj moją implementację nakładki stałego obszaru wiadomości (wypełnianego programowo):

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

Oraz w HTML

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

Kiedy #datastaje się dłuższy od ekranu, #messutrzymuje swoją pozycję na ekranie, #dataprzewijając się pod nim.

Więc gaiour ma rację, ale jeśli szukasz elementu o pełnej wysokości, który nie przewija się wraz z zawartością, ale w rzeczywistości jest wysokością kontenera, oto poprawka. Mają rodzica, którego wysokość powoduje przepełnienie, kontener zawartości, który ma 100% wysokości overflow: scroll, a także rodzeństwo można ustawić zgodnie z rozmiarem nadrzędnym, a nie rozmiarem elementu przewijania. Oto skrzypce: http://jsfiddle.net/M5cTN/196/

i odpowiedni kod:

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

Wpadłem w taką sytuację i utworzenie dodatkowego div było niepraktyczne. Skończyło się na tym, że full-heightustawiłem div naheight: 10000%; overflow: hidden;

Z pewnością nie jest to najczystsze rozwiązanie, ale działa naprawdę szybko.