Posisi Absolut + Scrolling

Dengan berikut HTMLdanCSS

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

Bagian dalam divmengambil seluruh kepala wadah sesuai keinginan. Jika sekarang saya menambahkan yang lain, aliran, konten ke wadah seperti:

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

Kemudian penampung menggulir sesuai keinginan, namun elemen yang benar-benar diposisikan tidak lagi tertambat ke bagian bawah penampung tetapi berhenti di bagian bawah penampung yang dapat dilihat. Pertanyaanku adalah; adakah cara agar elemen yang benar-benar diposisikan menjadi tinggi gulir lengkap penampungnya tanpa menggunakan JS?

Anda perlu membungkus teks dalam sebuah divelemen dan menyertakan elemen yang benar-benar diposisikan di dalamnya.

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

Mengatur posisi div bagian dalam untuk relativemembuat elemen posisi absolut di dalamnya mendasarkan posisi dan tingginya di atasnya daripada di .containerdiv, yang memiliki ketinggian tetap. Tanpa bagian dalam, yang diposisikan secara relatif div, .full-heightdiv akan selalu menghitung dimensi dan posisinya berdasarkan .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;akan menyelesaikan masalah Anda. Sebagai contoh, tinjau penerapan saya atas hamparan area pesan tetap (diisi secara terprogram):

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

Dan di HTML

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

Ketika #datamenjadi lebih panjang #messdari layar, pertahankan posisinya di layar, sambil #datamenggulir di bawahnya.

Jadi gaiour benar, tetapi jika Anda mencari item dengan tinggi penuh yang tidak tergulir dengan konten, tetapi sebenarnya adalah tinggi wadah, berikut perbaikannya. Memiliki induk dengan tinggi yang menyebabkan luapan, wadah konten yang memiliki tinggi 100% dan overflow: scroll, dan saudara kandung kemudian dapat diposisikan sesuai dengan ukuran induk, bukan ukuran elemen gulir. Ini biola: http://jsfiddle.net/M5cTN/196/

dan kode yang relevan:

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

Saya mengalami situasi ini dan membuat div tambahan tidak praktis. Saya akhirnya hanya mengatur full-heightdiv keheight: 10000%; overflow: hidden;

Jelas bukan solusi terbersih, tetapi ini bekerja sangat cepat.