Wie kann man ein untergeordnetes div scrollbar machen, wenn es die Höhe des übergeordneten Elements überschreitet?

Lesezeit: 3 Minuten

Benutzer-Avatar
Benutzer2066880

Ich habe 2 untergeordnete Divs, die in einem übergeordneten Div im Zeilen-Spalten-Muster verschachtelt sind: Das übergeordnete Element ist eine Spalte und die untergeordneten Elemente sind Zeilen.Geben Sie hier die Bildbeschreibung ein

Das obere Kind-Div hat eine variable Höhe, ist aber garantiert kleiner als die Höhe des Eltern-Div.

Das untere untergeordnete div hat ebenfalls eine variable Höhe. In einigen Fällen führt die Höhe der untergeordneten Divs dazu, dass das untere untergeordnete Div das übergeordnete Element überschreitet. In diesem Fall muss ich das untere div scrollbar machen. Beachten Sie, dass ich möchte, dass nur das untere Div scrollbar ist, nicht das gesamte übergeordnete Div.

Wie gehe ich damit um?

Siehe beigefügtes jsfiddle für ein Fallbeispiel: http://jsfiddle.net/0yxnaywu/5/

HTML:

 <div class="parent">
    <div class="child1">
        hello world filler
    </div>
    <div class="child2">
        this div should overflow and scroll down
    </div>
</div>

CSS:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    background-color: red;
}

.child2 {
    background-color: blue;
}

  • Sie müssen einen Scroller für Eltern hinzufügen jsfiddle.net/0yxnaywu/1

    – Vitorino fernandes

    5. Januar 2015 um 17:32 Uhr


  • Das macht also das gesamte übergeordnete div scrollbar, ich möchte, dass nur das untere untergeordnete div scrollbar ist.

    – Benutzer2066880

    5. Januar 2015 um 17:39 Uhr

  • Nicht positiv, aber ich denke, Sie müssen etwas Javascript verwenden. Überlauf funktioniert nur, wenn Sie ihm einen Wert für Überlauf geben, wenn dieser größer als ist. Ihr Wert hängt davon ab, wie groß die Oberseite ist, was Sie meiner Meinung nach erfassen müssen, um es dann zu berechnen.

    – caleb.breckon

    5. Januar 2015 um 17:46 Uhr

  • Überprüfen Sie meine Antwort für ein Beispiel.

    – caleb.breckon

    5. Januar 2015 um 17:56 Uhr

Da dieser Beitrag bei Google immer noch sehr hoch rankt, möchte ich eine bessere Lösung mit Flexbox posten. Eigentlich ist das ganz einfach. Verwenden Anzeige: flex, Biegerichtung: Spalte und Überlauf versteckt für Eltern u Überlauf-y: auto für Kind.

.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollable-child {
  overflow-y: auto;
}

Hier ist der Stift:
https://codepen.io/pawelsas/pen/vdwjpj

  • es geht auch ohne overflow: hidden; des .Verpackung

    – Liran Brimer

    23. August 2018 um 11:20 Uhr

  • Danke für die Antwort von 2018, in meinem Fall musste ich auch deklarieren flex: 1 auf der .wrapper um den Bildschirmraum zu füllen

    – Evgeni Atanasov

    10. November 2018 um 15:41 Uhr


  • positiv bewertet! Sie, Sir, haben mir 1 Stunde des Herumfummelns mit Höhen erspart

    – PirateApp

    8. April 2020 um 7:09 Uhr

  • Ich meine, Ihre Begründung, eine bessere Lösung zu posten, weil das Ranking bei Google gut ist, ist nicht gerechtfertigt, aber die Lösung funktioniert für mich

    – Sirup

    15. September 2020 um 12:30 Uhr

Überlauf funktioniert nur, wenn Sie ihm einen Wert für Überlauf geben, wenn dieser größer als ist. Ihr Wert ist relativ dazu, wie groß die Spitze ist. Verwenden Sie also jQuery, holen Sie sich diesen Wert und subtrahieren Sie ihn dann vom übergeordneten Wert.

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

und hinzufügen overflowist für die Kinder

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

  • Macht Sinn! Ich habe mich gefragt, ob dies ohne Javascript möglich ist, aber ich finde diese Lösung trotzdem elegant. Vielen Dank.

    – Benutzer2066880

    5. Januar 2015 um 18:22 Uhr

  • Gute Antwort zu der Zeit, aber ist jetzt veraltet.

    – Metrik

    27. April 2019 um 15:09 Uhr

Benutzer-Avatar
Anthrazit

Verwenden overflow Eigentum:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

jsFiddle

BEARBEITEN:

Wenn Sie möchten, dass nur das zweite div scrollbar ist, müssen Sie die Höhe auf ändern 30px Also child1 und child2 wird genau zu den Eltern passen height und hinzufügen overflow Eigentum dort:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    height: 70px;
    background-color: red;
}

.child2 {
    height: 30px;
    background-color: blue;
    overflow: auto;
}

jsFiddle

  • Sie möchten, dass nur das untergeordnete Div 2 scrollbar wird, nicht das übergeordnete Element.

    – caleb.breckon

    5. Januar 2015 um 17:33 Uhr

1186110cookie-checkWie kann man ein untergeordnetes div scrollbar machen, wenn es die Höhe des übergeordneten Elements überschreitet?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy