HTML: จะสร้าง DIV ที่มีแถบเลื่อนแนวตั้งสำหรับย่อหน้ายาวได้อย่างไร

ฉันต้องการแสดงข้อกำหนดและเงื่อนไขในเว็บไซต์ของฉัน ฉันไม่ต้องการใช้ช่องข้อความและไม่ต้องการใช้ทั้งหน้า ฉันแค่ต้องการแสดงข้อความของฉันในพื้นที่ที่เลือกและต้องการใช้แถบเลื่อนแนวตั้งเท่านั้นเพื่อลงไปอ่านข้อความทั้งหมด

ขณะนี้ฉันใช้รหัสนี้:

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

สองปัญหา:

1. ไม่ได้กำหนดความกว้างและความสูงและกระจายจนกว่าข้อความทั้งหมดจะปรากฏขึ้น
2. อย่างที่สองมันแสดงแถบเลื่อนแนวนอนและฉันไม่ต้องการแสดง

ใช้overflow-y. คุณสมบัตินี้คือ CSS 3

หากต้องการซ่อนแถบเลื่อนแนวนอนคุณสามารถตั้งค่า overflow-x เป็นซ่อนได้ดังนี้:

overflow-x: hidden;

คุณต้องระบุwidthและheightในpx:

width: 10px; height: 10px;

นอกจากนี้คุณสามารถใช้overflow: auto;เพื่อป้องกันไม่ให้แถบเลื่อนแนวนอนแสดง

ดังนั้นคุณอาจต้องลองทำสิ่งต่อไปนี้:

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

ขอบคุณก่อน

ใช้overflow:autoมันได้ผลสำหรับฉัน

แถบเลื่อนแนวนอนจะหายไป

สำหรับกรณีใด ๆ ที่ตั้งค่าoverflow-xเป็นhiddenและฉันต้องการตั้งค่าmax-heightเพื่อ จำกัด การขยายความสูงของ div รหัสของคุณควรมีลักษณะดังนี้:

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

หากต้องการแสดงแถบเลื่อนแนวตั้งใน div ของคุณคุณต้องเพิ่ม

height: 100px;   
overflow-y : scroll;

หรือ

height: 100px; 
overflow-y : auto;

overflow-y : scroll;
overflow-x : hidden;

height เป็นทางเลือก

คุณสามารถใช้คุณสมบัติล้น

style="overflow: scroll ;max-height: 250px; width: 50%;"

ฉันก็ประสบปัญหาเดียวกัน ... ลองทำสิ่งนี้ ... สิ่งนี้ได้ผลสำหรับฉัน

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

นี่คือส่วนผสมของฉัน:

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.