Position Absolut + Scrollen

Mit den folgenden HTMLundCSS

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

Das Innere divnimmt nach Wunsch den vollen Kopf des Behälters ein. Wenn ich jetzt einen anderen Flow-Inhalt zum Container hinzufüge, wie z.

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

Dann rollt der Container wie gewünscht, jedoch ist das absolut positionierte Element nicht mehr am Boden des Containers verankert, sondern stoppt am anfänglich sichtbaren Boden des Containers. Meine Frage ist; Gibt es eine Möglichkeit, das absolut positionierte Element ohne Verwendung auf die vollständige Bildlaufhöhe seines Containers zu bringen JS?

Sie müssen den Text in ein divElement einschließen und das absolut positionierte Element darin einfügen.

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

Wenn Sie die Position des inneren Div so einstellen, relativedass die absolut positionierten Elemente innerhalb des Div ihre Position und Höhe darauf .containerbasieren, anstatt auf dem Div, das eine feste Höhe hat. Ohne die innere, relativ positionierte div, .full-heightberechnet der Div immer seine Abmessungen und Position basierend auf .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;wird Ihr Problem lösen. Überprüfen Sie als Beispiel meine Implementierung eines festen Nachrichtenbereichs-Overlays (programmgesteuert ausgefüllt):

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

Und im HTML

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

Wenn #datadas Bild länger wird, #messbehält es seine Position auf dem Bildschirm bei, während es #datadarunter scrollt.

Gaiour ist also richtig, aber wenn Sie nach einem Element mit voller Höhe suchen, das nicht mit dem Inhalt scrollt, sondern tatsächlich die Höhe des Containers ist, finden Sie hier die Lösung. Haben Sie ein übergeordnetes overflow: scrollElement mit einer Höhe, die einen Überlauf verursacht, einen Inhaltscontainer mit einer Höhe von 100% und und ein Geschwister können dann entsprechend der übergeordneten Größe und nicht der Größe des Bildlaufelements positioniert werden. Hier ist die Geige: http://jsfiddle.net/M5cTN/196/

und den entsprechenden Code:

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

Ich bin in diese Situation geraten und es war unpraktisch, ein zusätzliches Div zu erstellen. Am Ende habe ich nur die full-heightDiv auf gesetztheight: 10000%; overflow: hidden;

Natürlich nicht die sauberste Lösung, aber sie funktioniert sehr schnell.