HTML-element position:absolute vs. scrollen

Ich habe zwei div mit position - Attribut auf absolute. Eines davon ist ein Sohn von einem anderen scrollbaren div. Sowas:

<body>
  <div class="foo" id="outside"></div>

  <div class="bar">
    <div class="foo" id="inside"></div>
  </div>
</body>

CSS:

.foo{position:absolute;}
.bar{max-width: 300px;}

Nun, sagen wir, der bar div hat eine lange Inhalte und so kann der Nutzer einen Bildlauf (nur das div nicht die gesamte Seite!); die inside div nicht scrollen, mit seinem Vater. Im Gegenteil, die outside div scrollt die gesamte Seite, wenn es lange genug, um zu scrollen. Ich will die inside div scrollen mit der bar div, wie kann ich das Verhalten reproduzieren, der outside div-Element auf der inside div?

EDIT: ich lese nochmal meinen post, es war nicht so einfach, tut mir Leid. Ich werde versuchen, mit einem Beispiel:

http://jsfiddle.net/QYHSd/2/

Ich will das rote div scrollen mit dem Inhalt von den grünen, wenn der Benutzer blättert der grüne div. Sorry nochmal wenn ich mich nicht in der Lage zu erklären, nun, was Id' zu erhalten möchten.

  • fixieren Sie die 'bar' Höhe, und seine 'überlauf' auf 'auto'.
InformationsquelleAutor Federinik | 2013-09-02
  1. 6

    Hinzufügen position: relative; zu .bar. Dann ist der Kontext für die absolute Positionierung auf .foo aus body zu .bar.

    .bar {
    position: relative;
    max-width: 300px;
    height: 100px;
    overflow-y:scroll;
    overflow-x:hidden;
}

    jsFiddled hier

    • Ich schlage vor, Sie beweisen dies durch eine änderung der OP-Frage ist jsFiddle.
    • Okay: jsfiddle.net/AaLPp
    • Es funktioniert jetzt, danke Euch allen 😀
    InformationsquelleAutor Bryson Gilbert
  2. 0
    .bar {
max-width: 300px;
max-height: 300px;
overflow-y:scroll;
overflow-x:hidden;
}

    Diese werde es so machen, dass es immer eine scroll-Leiste sichtbar ist, auch wenn es keinen Inhalt in der div. Wenn Sie möchten, dass die Bildlaufleiste nur anzeigen, wenn nötig, verwenden Sie "auto" anstelle von "Blättern".

    InformationsquelleAutor Gary Hayes
Schreibe einen Kommentar