scrollbares div innerhalb des Containers

Ich habe Folgendes HTML: http://jsfiddle.net/fMs67/. Ich möchte gern div2 zu respektieren, die Größe der div1 und das scrollen durch den Inhalt der div3.

Ist das möglich?

Dank!

UPDATE-1:

Dies ist die erweiterte Fall, dass ich zu stark vereinfacht, wenn ich die Frage gestellt habe: http://jsfiddle.net/Wcgvt/. Ich brauche irgendwie das header+es ist Geschwister-div nicht über die übergeordneten div-Größe.

InformationsquelleAutor der Frage shining-light | 2012-03-21

  1. 34

    Hinzufügen position: relative an die Eltern, und eine max-height:100%; auf div2 funktioniert. 

    <div id="div1" style="height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

</body>​

    Update: die folgende Abbildung zeigt Die "Aktualisierung" Beispiel und beantworten Sie. http://jsfiddle.net/Wcgvt/181/

    Das Geheimnis ist die Verwendung box-sizing: border-boxund eine Polsterung, um den zweiten div Höhe 100%, aber verschieben Sie den Inhalt nach unten 50px. Dann wickeln Sie den Inhalt in ein div mit overflow: auto enthalten die Bildlaufleiste. Achten Sie auf z-Indizes zu halten, alle text-wählbar - hoffe, das hilft, einige Jahre später.

    InformationsquelleAutor der Antwort Chris Carew

  2. 10

    Wenn Sie overflow: scroll auf einer festen Höhe divdie div wird scrollen, wenn der Inhalt zu viel Platz wegnehmen.

    InformationsquelleAutor der Antwort Frank van Wijk

  3. 7

    Statt overflow:auto versuchen overflow-y:auto. Sollte funktionieren wie ein Charme!

    InformationsquelleAutor der Antwort NotJay

  4. 4

    Ist es das, was Sie wollen?

    <body>
   <div id="div1" style="height: 500px;">
     <div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
       <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
     </div>
   </div>

    http://jsfiddle.net/fMs67/1/

    InformationsquelleAutor der Antwort Trey Copeland

  5. 2

    habe ich gerade Hinzugefügt (overflow:scroll;) (div3) mit fester Höhe.

    sehen die Geige:- http://jsfiddle.net/fMs67/10/

    InformationsquelleAutor der Antwort Shailender Arora

  6. 0

    Erstellte ich eine verbesserte version, basierend auf Trey Copland ' s Geige, die ich denke, ist mehr wie das, was Sie wollte. Hier Hinzugefügt für zukünftige Referenz für diejenigen, die kommen später hier.
    Fiddle-Beispiel

        <body>
<style>
.modal {
  height: 390px;
  border: 5px solid green;
}
.heading {
  padding: 10px;
}
.content {
  height: 300px;
  overflow:auto;
  border: 5px solid red;
}
.scrollable {
  height: 1200px;
  border: 5px solid yellow;

}
.footer {
  height: 2em;
  padding: .5em;
}
</style>
      <div class="modal">
          <div class="heading">
            <h4>Heading</h4>
          </div>
          <div class="content">
              <div class="scrollable" >hello</div>
          </div>
          <div class="footer">
            Footer
          </div>
      </div>
    </body>

    InformationsquelleAutor der Antwort MichaelC

Schreibe einen Kommentar