Absolut positionierte div-Element innerhalb des Blocks mit position:fixed und Scrollbalken

Ich habe ein div mit position: fixed mit zwei weiteren divs: eine mit Inhalt und die zweite die muss immer positioniert werden, auf der Unterseite des Haupt-div.

Hier ist ein Beispiel:

CSS:

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

Das problem ist, dass Fußzeile beginnt zu verschieben und mit anderen Inhalten, wenn der Benutzer scrollt Inhalt der main-block, trotz position:absolute des footer-Blocks.

Gibt es eine Möglichkeit, stick footer an den unteren Rand des Haupt-fixed-block ohne änderung der html-Struktur?

Und was ist, wenn Haupt-div enthält, viele Kinder und nur die Letzte von Ihnen ist der footer, die wir benötigen, um stick nach unten? Beispiel:

CSS:

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

BTW, vielleicht laufen in ein problem, "wenn" Sie sich entscheiden, fügen Sie width:100% zu Ihrem .footer wie hier: jsfiddle.net/unV9H/8 (Gebäude auf der Spitze von Oriol Lösung), als den unteren Teil der scrollbar wird ausgeblendet werden, indem Sie Ihre .footer.

InformationsquelleAutor accme | 2012-08-14

Seit dem absolut positionierten element innerhalb .scroller und Sie nicht wollen, es zu bewegen beim scrollen, das scrollbare container sollte .content stattdessen .scroller.

.content {
  height: 100px;
  overflow: auto;
}

Darüber hinaus sollten Sie entfernen bottom: 0 von der festen Hülle so, dass seine Höhe ist gegeben durch die Inhalte, das heißt, dass 100px.

CSS:

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
}
.content {
  height: 100px;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

In Fall, dass Sie mehrere .content Elemente und nicht wollen, um zu Blättern jeweils einzeln, Sie können wickeln Sie alle in einer .scroller-inner - container, und legen Sie die Stile über zu.

CSS:

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
}
.scroller-inner {
  height: 100px;
  overflow: auto;
}
.footer {
  position: absolute;
  bottom: 0;
}

HTML:

<div class="scroller">
  <div class="scroller-inner">
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
    <div class="content">
      <div>content</div><div>content</div><div>content</div><div>content</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

Alternativ, wenn Sie wissen, die Höhe der Kopfzeile, können Sie die Fußzeile ein fester Bestandteil, und die Verwendung von Rändern in die korrekte position. Dies ist ein bisschen hacky, obwohl.

CSS:

.scroller {
  position: fixed;
  border: 1px solid #ddd;
  width: 240px;
  height: 100px; /* val1 */
  top: 0; /* val2 */
  overflow: auto;
}
.footer {
  position: fixed;
  white-space: nowrap;
  top: 100px; /* val1 + val2 */
  line-height: 20px; /* val3 */
  font-size: 16px; /* val4 */
  margin-top: -18px; /* val3/2 + val4/2 */
}

HTML:

<div class="scroller">
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="content">
    <div>content</div><div>content</div><div>content</div><div>content</div>
  </div>
  <div class="footer">FOOTER</div>
</div>

Ich mag es, außer der Tatsache, dass Sie angeben, die Höhe des container - ... +1
Seltsam genug, aber der Scrollbalken verschwindet in Chrom. Für mich zumindest.
Problem behoben, jetzt funktioniert es nicht-geben Sie die Höhe des Containers.
Das ist komisch, beide jsfiddle.net/unV9H/3 und jsfiddle.net/unV9H/9 Arbeit auch auf Chrome für mich... (ich habe Chrome 21.0.1180.75 m)
Gerade Hinzugefügt update auf die ursprüngliche Frage.
Dies ist auch ein schöner workaround, wenn eine Feste Positionierung gefordert ist, aber nicht funktioniert, vor allem auf mobilen Geräten. Danke!

InformationsquelleAutor Oriol

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.