HTML: Jak stworzyć DIV tylko z pionowymi paskami przewijania dla długich akapitów?

136

Chcę pokazać warunki i warunki w mojej witrynie. Nie chcę używać pola tekstowego, a także nie chcę używać całej mojej strony. Chcę tylko wyświetlić mój tekst w wybranym obszarze i chcę używać tylko pionowego paska przewijania, aby zejść w dół i przeczytać cały tekst.

Obecnie używam tego kodu:

<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>

Dwa problemy:

  1. Nie ustala szerokości, wysokości i rozłożenia, dopóki nie pojawi się cały tekst.
  2. Po drugie, pokazuje poziomy pasek przewijania i nie chcę go pokazywać.
css html overflow Awan
źródło
Problem szerokości / wysokości rozwiązuje „Daniel Vassallo”, a poziomego paska przewijania rozwiązuje „janmoesen”. Kogo mam przyjąć odpowiedź :) czy mogę wybrać wiele;)
Awan

Odpowiedzi:

238

Użyj overflow-y. Ta właściwość to CSS 3.

janmoesen
źródło
Problem szerokości / wysokości rozwiązuje „Daniel Vassallo”, a poziomego paska przewijania rozwiązuje „janmoesen”. Kogo mam przyjąć odpowiedź :) czy mogę wybrać wiele;)
Awan
21
To całkiem oczywiste: zawsze wybieraj słabszego, czyli tego o najniższej reputacji. ;-)
janmoesen
hahaha. Ale twoja odpowiedź nie jest szczegółowo, jak „Daniel Vassallo” :)
Awan
Dążę do tego, by „mniej znaczy więcej” i pozwalam, aby linki przemówiły. W każdym razie, po prostu wybierz jeden i miłego weekendu!
janmoesen
14
Uważam, że standardem tutaj jest nie odpowiadanie na pytanie za pomocą „tylko” linku, ponieważ linki mogą stać się nieprawidłowe. Powinieneś zawrzeć wystarczającą ilość informacji, aby odpowiedzieć bezpośrednio na pytanie w odpowiedzi, a następnie mieć link jako odniesienie.
Jeffrey Harmon
66

aby ukryć poziome paski przewijania, możesz ustawić overflow-x na ukryte, na przykład:

overflow-x: hidden;
Kornelius
źródło
Czuję, że to odpowiedź, której chciał pytający ... zasługujesz na więcej uznania
Ian Wise
52

Musisz określić widthi heightwpx :

width: 10px; height: 10px;

Ponadto możesz użyć, overflow: auto;aby zapobiec wyświetlaniu poziomego paska przewijania.

Dlatego możesz spróbować następujących rozwiązań:

<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
źródło
Szerokość i wysokość działają teraz, ale poziomy pasek przewijania nadal nie został usunięty.
Awan
Problem szerokości / wysokości rozwiązuje „Daniel Vassallo”, a poziomego paska przewijania rozwiązuje „janmoesen”. Kogo mam przyjąć odpowiedź :) czy mogę wybrać wiele;)
Awan
19

Dziękuję najpierw

Użyj overflow:autotego działa dla mnie.

poziomy pasek przewijania znika.

raji
źródło
15

Dla każdego przypadku zestawu overflow-xdo hiddeni wolę do zestawu max-heightw celu ograniczenia ekspansji wysokości div. Twój kod powinien wyglądać następująco:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
Brane
źródło
13

Aby wyświetlić pionowy pasek przewijania w swoim div, musisz dodać

height: 100px;   
overflow-y : scroll;

lub

height: 100px; 
overflow-y : auto;
Ricardo Romo
źródło
2
Wolę używać max-height: 100px;.
Roman
Ze względu na moją konfigurację heighttego brakowało, więc nie wyświetlało pionowych pasków przewijania, chociaż height:100%;działało lepiej dla mnie.
SharpC,
3 
overflow-y : scroll;
overflow-x : hidden;

height jest opcjonalne

Amobi Chuks
źródło
2

Możesz użyć właściwości overflow 

style="overflow: scroll ;max-height: 250px; width: 50%;"
Sunil Kumar
źródło
1

Też napotkałem ten sam problem ... spróbuj to zrobić ... to zadziałało dla mnie

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }
singhkumarhemant
źródło
0

To jest moja mieszanka:

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
źródło