HTML: Wie erstelle ich ein DIV mit nur vertikalen Bildlaufleisten für lange Absätze?

136

Ich möchte die Allgemeinen Geschäftsbedingungen auf meiner Website anzeigen. Ich möchte kein Textfeld verwenden und auch nicht meine gesamte Seite. Ich möchte nur meinen Text im ausgewählten Bereich anzeigen und nur die vertikale Bildlaufleiste verwenden, um nach unten zu gehen und den gesamten Text zu lesen.

Derzeit verwende ich diesen Code:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Zwei Probleme:

  1. Es wird nicht die Breite und Höhe festgelegt und verteilt, bis der gesamte Text angezeigt wird.
  2. Zweitens wird die horizontale Bildlaufleiste angezeigt, und ich möchte sie nicht anzeigen.
Awan
quelle
Das Breiten- / Höhenproblem wird von "Daniel Vassallo" und das horizontale Bildlaufleistenproblem von "janmoesen" gelöst. Nun, wer ist die Antwort, die ich akzeptieren soll :) Kann ich mehrere auswählen;)
Awan

Antworten:

238

Verwenden Sie overflow-y. Diese Eigenschaft ist CSS 3.

janmoesen
quelle
Das Breiten- / Höhenproblem wird von "Daniel Vassallo" und das horizontale Bildlaufleistenproblem von "janmoesen" gelöst. Nun, wer ist die Antwort, die ich akzeptieren soll :) Kann ich mehrere auswählen;)
Awan
21
Das ist ziemlich offensichtlich: Gehen Sie immer für den Außenseiter, dh für den mit dem niedrigsten Ruf. ;-)
Janmoesen
hahaha. Aber Ihre Antwort ist nicht im Detail ab "Daniel Vassallo" :)
Awan
Ich strebe nach "weniger ist mehr" und lasse die Links sprechen. Wie auch immer, wählen Sie einfach eine und haben Sie ein schönes Wochenende!
Janmoesen
14
Ich glaube, der Standard hier ist, eine Frage nicht mit "nur" einem Link zu beantworten, da Links ungültig werden können. Sie sollten genügend Informationen angeben, um die Frage direkt in Ihrer Antwort zu beantworten, und dann den Link als Referenz haben.
Jeffrey Harmon
66

Um die horizontalen Bildlaufleisten auszublenden, können Sie overflow-x wie folgt auf ausgeblendet setzen:

overflow-x: hidden;
Kornelius
quelle
Ich denke, dies ist die Antwort, die der Fragesteller wollte ... Sie verdienen mehr Anerkennung
Ian Wise
52

Sie müssen das widthund heightin angeben px:

width: 10px; height: 10px;

Außerdem können Sie overflow: auto;damit verhindern, dass die horizontale Bildlaufleiste angezeigt wird.

Daher möchten Sie möglicherweise Folgendes ausprobieren:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>
Daniel Vassallo
quelle
Breite und Höhe funktionieren jetzt, aber die horizontale Bildlaufleiste wird immer noch nicht entfernt.
Awan
Das Breiten- / Höhenproblem wird von "Daniel Vassallo" und das horizontale Bildlaufleistenproblem von "janmoesen" gelöst. Nun, wer ist die Antwort, die ich akzeptieren soll :) Kann ich mehrere auswählen;)
Awan
19

Danke zuerst

Verwenden overflow:auto es funktioniert für mich.

Die horizontale Bildlaufleiste verschwindet.

Raji
quelle
15

Für jeden Fall overflow-xauf hiddenund ich bevorzuge zu setzen max-height, um die Ausdehnung der Höhe des Div zu begrenzen. Ihr Code sollte folgendermaßen aussehen:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
Brane
quelle
13

Um die vertikale Bildlaufleiste in Ihrem Div anzuzeigen, müssen Sie hinzufügen

height: 100px;   
overflow-y : scroll;

oder

height: 100px; 
overflow-y : auto;
Ricardo Romo
quelle
2
Ich benutze lieber max-height: 100px;.
Roman
Aufgrund meiner Konfiguration heightfehlte es, sodass die vertikalen Bildlaufleisten nicht angezeigt wurden, obwohl dies height:100%;für mich besser funktionierte.
SharpC
3
overflow-y : scroll;
overflow-x : hidden;

height es ist optional

Amobi Chuks
quelle
2

Sie können die Überlaufeigenschaft verwenden

style="overflow: scroll ;max-height: 250px; width: 50%;"
Sunil Kumar
quelle
1

Ich hatte auch das gleiche Problem ... versuche das zu tun ... das hat bei mir funktioniert

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }
singhkumarhemant
quelle
0

Das ist meine Mischung:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.
Daniel De León
quelle