CSS-Bildlaufleiste ausblenden, wenn nicht benötigt

435

Ich versuche herauszufinden, wie ich das verstecken kann overflow-y:scroll; wenn es nicht gebraucht wird. Was ich damit meine ist, dass ich eine Website erstelle und einen Hauptbereich habe, in dem Beiträge angezeigt werden. Ich möchte die Bildlaufleiste ausblenden, wenn der Inhalt die aktuelle Breite nicht überschreitet.

Auch meine zweite Frage. Ich möchte es so machen, dass, wenn die Beiträge die aktuelle Breite überschreiten, die Breite automatisch zunimmt und der Inhalt nicht sofort einsatzbereit ist.

Hat jemand eine Ahnung, wie das geht?

Beitragsbereich:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Haupt-Website-Container:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}
html css Thanos Paravantis
quelle
Möchten Sie die vertikale oder horizontale Bildlaufleiste ausblenden? Können Sie das Beispiel mit HTML-Code auf z. B. jsfiddle.net posten und hier verlinken
RJo
Hallo, ich habe die 2 Klassen gepostet, die ich benutze. Auf dem HTML nichts als das Aufrufen von Klassen.
Thanos Paravantis

Antworten:

741

Setzen Sie die overflow-yEigenschaft auf autooder entfernen Sie die Eigenschaft insgesamt, wenn sie nicht vererbt wird.

RJo
quelle
Ich könnte, aber ich brauche auch Hilfe bei meiner zweiten Frage, über die Breite, die automatisch zunimmt.
Thanos Paravantis
Sie können jederzeit versuchen, die Stackoverflow-Suche zu verwenden: stackoverflow.com/questions/450903/…
RJo
Wo ist Scroll in Ihren Beispielen?
Grün
13
Beim Einstellen des overflow-y: autogelösten Problems - der Link zeigt eigentlich kein Beispiel dafür ...
Shadow
2
Sollte beachten, dass dies overflow-x: autoauch funktioniert, um horizontale Bildlaufleisten auszublenden.
Edward D'Souza
40

Sie können verwenden overflow:auto;

Sie können die x- oder y-Achse auch einzeln mit den Eigenschaften overflow-xund steuern overflow-y.

Beispiel:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}
Ayyappan K.
quelle
20
Obwohl wir uns für Ihre Antwort bedanken, wäre es besser, wenn sie zusätzlich zu den anderen Antworten einen zusätzlichen Wert liefern würde. In diesem Fall bietet Ihre Antwort keinen zusätzlichen Wert, da ein anderer Benutzer diese Lösung bereits veröffentlicht hat. Wenn eine vorherige Antwort für Sie hilfreich war, sollten Sie sie abstimmen, anstatt dieselben Informationen zu wiederholen.
Toby Speight
9

Sie können sowohl .content als auch .container zum Überlaufen verwenden: auto. Wenn der Text automatisch überschritten wird, wird die x-Achse und die y-Achse gescrollt. (Keine Notwendigkeit, getrennte x-Achse und y-Achse anzugeben, führt normalerweise zu einem Überlauf: auto)

.content {overflow: auto;}

Ayyappan K.
quelle
5 
.selected-elementClass{
    overflow-y:auto;
}
Prateek Arora
quelle
1

.container {overflow: auto;} erledigt den Trick. Wenn Sie eine bestimmte Richtung steuern möchten, sollten Sie Auto für diese bestimmte Achse einstellen. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

Der obige Code verbirgt jeglichen Überlauf in der x-Achse und generiert bei Bedarf eine Bildlaufleiste auf der y-Achse. Sie müssen jedoch sicherstellen, dass die Standardhöhe des Inhalts kleiner als die Containerhöhe ist. Andernfalls wird die Bildlaufleiste nicht ausgeblendet.

Neero
quelle