Posizione assoluta + scorrimento

Con il seguente 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>

L'interno divoccupa l'intera testa del contenitore come desiderato. Se ora aggiungo un altro flusso di contenuto al contenitore come:

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

Quindi il contenitore scorre come desiderato, tuttavia l'elemento in posizione assoluta non è più ancorato al fondo del contenitore ma si ferma al fondo visibile iniziale del contenitore. La mia domanda è; c'è un modo per fare in modo che l'elemento assolutamente posizionato sia l'intera altezza di scorrimento del suo contenitore senza utilizzarlo JS?

Devi avvolgere il testo in un divelemento e includere l'elemento posizionato in modo assoluto al suo interno.

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

Impostando la posizione del div interno su relative, gli elementi di posizione assoluta al suo interno basano la loro posizione e altezza su di esso piuttosto che sul .containerdiv, che ha un'altezza fissa. Senza l'interno, relativamente posizionato div, il .full-heightdiv calcolerà sempre le sue dimensioni e posizione in base a .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;risolverà il tuo problema. Ad esempio, rivedi la mia implementazione di una sovrapposizione di area di messaggi fissa (popolata a livello di codice):

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

E nell'HTML

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

Quando #datadiventa più lungo lo schermo, #messmantiene la sua posizione sullo schermo, mentre #datascorre sotto di esso.

Quindi gaiour ha ragione, ma se stai cercando un elemento a tutta altezza che non scorre con il contenuto, ma in realtà è l'altezza del contenitore, ecco la soluzione. Avere un genitore con un'altezza che causa l'overflow, un contenitore di contenuti che ha un'altezza del 100% overflow: scrolle un fratello può essere posizionato in base alla dimensione padre, non alla dimensione dell'elemento di scorrimento. Ecco il violino: http://jsfiddle.net/M5cTN/196/

e il relativo codice:

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

Mi sono imbattuto in questa situazione e creare un div in più non era pratico. Ho finito per impostare il full-heightdiv suheight: 10000%; overflow: hidden;

Chiaramente non è la soluzione più pulita, ma funziona molto velocemente.