एचटीएमएल: लंबे पैराग्राफ के लिए केवल ऊर्ध्वाधर स्क्रॉल-बार के साथ एक डीआईवी कैसे बनाएं?

136

मैं अपनी वेबसाइट पर नियम और शर्त नोट दिखाना चाहता हूं। मैं पाठ क्षेत्र का उपयोग नहीं करना चाहता और न ही अपने पूरे पृष्ठ का उपयोग करना चाहता हूं। मैं केवल चयनित क्षेत्र में अपना पाठ प्रदर्शित करना चाहता हूं और नीचे जाने और सभी पाठ पढ़ने के लिए केवल ऊर्ध्वाधर स्क्रॉल-बार का उपयोग करना चाहता हूं।

वर्तमान में मैं इस कोड का उपयोग कर रहा हूं:

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

दो समस्याएं:

यह चौड़ाई और ऊंचाई को ठीक नहीं कर रहा है और तब तक फैलता है जब तक कि सभी पाठ दिखाई न दें।
दूसरा यह क्षैतिज स्क्रॉल-बार दिखा रहा है और मैं इसे दिखाना नहीं चाहता।

css html overflow

— अवान
स्रोत

चौड़ाई / ऊंचाई की समस्या "डैनियल वैसलो" द्वारा हल की जाती है और क्षैतिज स्क्रॉल-बार की समस्या "जेम्मोसेन" द्वारा हल की जाती है। अब मुझे किसका उत्तर स्वीकार करना चाहिए :) क्या मैं कई का चयन कर सकता हूं?)

— Awan

238

का उपयोग करें overflow-y। यह संपत्ति CSS 3 है।

— janmoesen
स्रोत

चौड़ाई / ऊंचाई की समस्या "डैनियल वैसलो" द्वारा हल की जाती है और क्षैतिज स्क्रॉल-बार की समस्या "जेम्मोसेन" द्वारा हल की जाती है। अब मुझे किसका उत्तर स्वीकार करना चाहिए :) क्या मैं एकाधिक का चयन कर सकता हूं?)

— आवन

21

यह बहुत स्पष्ट है: हमेशा दलित व्यक्ति के लिए जाना, यानी: सबसे कम प्रतिष्ठा वाला। ;-)

— जन्मोसेन

hahaha। लेकिन आपका जवाब "डैनियल वैसलो" :) के रूप में विस्तार से नहीं है :)

— Awan

मैं "कम है" के लिए प्रयास करता हूं और लिंक को बात करने देता हूं। वैसे भी, बस एक उठाओ और एक अच्छा सप्ताहांत है!

— १

14

मेरा मानना है कि यहां मानक "लिंक" के साथ एक प्रश्न का उत्तर नहीं देना है, क्योंकि लिंक अमान्य हो सकते हैं। आपको अपने उत्तर में सीधे प्रश्न का उत्तर देने के लिए पर्याप्त जानकारी शामिल होनी चाहिए, और फिर संदर्भ के रूप में लिंक होना चाहिए।

— जेफरी हर्मन

66

क्षैतिज स्क्रॉलबारों को छिपाने के लिए, आप इस तरह से छिपाए जाने के लिए अतिप्रवाह-एक्स सेट कर सकते हैं:

overflow-x: hidden;

— Kornelius
स्रोत

मुझे ऐसा लगता है कि यह उत्तर पूछने वाला चाहता था ... आप अधिक श्रेय के हकदार हैं

— इयान वाइज

52

आप निर्दिष्ट करने की आवश्यकता 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>

— डैनियल वासल्लो
स्रोत

चौड़ाई और ऊंचाई अब काम कर रही है, लेकिन क्षैतिज स्क्रॉलबार अभी भी हटाया नहीं गया है।

— आवन

चौड़ाई / ऊंचाई की समस्या "डैनियल वैसलो" द्वारा हल की जाती है और क्षैतिज स्क्रॉल-बार की समस्या "जेम्मोसेन" द्वारा हल की जाती है। अब मुझे किसका उत्तर स्वीकार करना चाहिए :) क्या मैं एकाधिक का चयन कर सकता हूं?)

— आवन

19

पहले आपका धन्यवाद

overflow:autoयह मेरे लिए काम करता है का उपयोग करें ।

क्षैतिज स्क्रॉल पट्टी गायब हो जाती है।

— राजी
स्रोत

15

किसी भी मामले के overflow-xलिए hiddenऔर मैं max-heightdiv की ऊंचाई के विस्तार को सीमित करने के लिए सेट करना पसंद करता हूं । आपका कोड इस तरह दिखना चाहिए:

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

— brane
स्रोत

13

अपने div में वर्टिकल स्क्रॉल बार दिखाने के लिए आपको जोड़ना होगा

height: 100px;   
overflow-y : scroll;

या

height: 100px; 
overflow-y : auto;

— रिकार्डो रोमियो
स्रोत

2

मैं उपयोग करना पसंद करता हूं max-height: 100px;।

— रोमन

मेरे विन्यास के कारण यह था heightकि ऊर्ध्वाधर स्क्रॉल सलाखों को नहीं दिखा रहा था, हालांकि यह height:100%;मेरे लिए बेहतर काम कर रहा था।

— शार्प डे

3

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

height वैकल्पिक है

— अमीबी चुक्स
स्रोत

2

आप अतिप्रवाह संपत्ति का उपयोग कर सकते हैं

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

— सुनील कुमार
स्रोत

1

मैंने भी इसी मुद्दे का सामना किया ... ऐसा करने की कोशिश करें ... यह मेरे लिए काम किया

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

— singhkumarhemant
स्रोत

0

यह मेरा मिश्रण है:

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.

— डैनियल डी लियोन
स्रोत