CSS: तय ऊंचाई के कंटेनर के अंदर div के लिए स्क्रॉलबार कैसे प्राप्त करें

Question

मेरे पास निम्नलिखित मार्कअप हैं:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

सीएसएस इस तरह दिखता है:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

इसकी सामग्री के कारण, की ऊंचाई div.Contentआमतौर पर उपलब्ध कराए गए स्थान से अधिक है div.FixedHeightContainer। फिलहाल, div.Contentपूरी तरह से नीचे से बाहर तक फैली हुई है div.FixedHeightContainer- बिल्कुल भी नहीं जो मुझे चाहिए।

मैं यह कैसे निर्दिष्ट करूँ कि div.Contentस्क्रॉलबार्स (अधिमानतः केवल लंबवत है, लेकिन मैं उधम मचाते हुए) नहीं हूँ जब इसकी ऊँचाई फिट करने के लिए बहुत बढ़िया है?

overflow:autoऔर overflow:scrollकुछ भी नहीं कर रहे हैं, कुछ विचित्र कारण के लिए।

Answer 1

सेटिंग का overflowध्यान रखना चाहिए, लेकिन आपको ऊंचाई Contentभी निर्धारित करनी चाहिए । यदि ऊंचाई विशेषता सेट नहीं है, तो div लंबवत रूप से उतनी ही बढ़ेगी जितनी की जरूरत है, और स्क्रॉलबार की आवश्यकता नहीं होगी।

उदाहरण देखें: http://jsfiddle.net/ftkbL/1/

Comments

ठीक है शुक्रिया। तो मुझे div.Content के लिए एक ऊंचाई निर्दिष्ट करने की आवश्यकता है? मुझे लगता है कि यह कंटेनर से बाहर काम करेगा कि यह फिट नहीं होगा, और उस आधार पर स्क्रॉलबार लगाएंगे।

— डेविड

यदि आप Contentएक निश्चित ऊँचाई देते हैं, तो आपको FixedHeightContainerएक निश्चित ऊँचाई नहीं देनी चाहिए , क्योंकि आप नहीं जान सकते कि आपका शीर्षक कितना ऊँचा होगा, इसलिए Contentउसे बाहर निकाला जा सकता है। देखें: jsfiddle.net/ftkbL/2 आपको केवल तत्व के साथ निर्धारित ऊंचाई निर्धारित करनी चाहिए overflow: scroll। देखें jsfiddle.net/ftkbL/3 या jsfiddle.net/ftkbL/4

— RoToRa

मैं आपकी बात देखता हूं (पहले लिंक से) लेकिन शीर्षक पाठ को जाना जाता है और जब तक उपयोगकर्ता ने पाठ को अव्यवहारिक आकार में नहीं बढ़ाया है, तब तक एक पंक्ति को तोड़ने के लिए बहुत कम है।

— डेविड

क्या एक छोटी ऊंचाई है और एक ही समय में स्क्रॉल-बार को छिपाने का कोई तरीका है? इस तरह जब उपयोगकर्ता मोबाइल उपकरणों पर नीचे खींचते हैं, तो वे देखेंगे कि वे नीचे स्क्रॉल कर रहे हैं, लेकिन अपने ब्राउज़र पर 2 स्क्रॉल-बार देखने के बोझिल बिना?

— क्लेविस

@blackhawk - ऐसा नहीं है कि मुझे पता है। इसके लिए आपको जावास्क्रिप्ट का उपयोग करना पड़ सकता है। विशेष रूप से मैं jQuery Draggable पुस्तकालय के बारे में सोच रहा हूँ: jqueryui.com/draggable -one बात करने के लिए विचार है ... डेस्कटॉप उपयोगकर्ताओं को स्क्रॉल करने के लिए कैसे पता चलेगा?

— डच ४३२

Answer 2

FWIW, यहाँ मेरा दृष्टिकोण = एक सरल है जो मेरे लिए काम करता है:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

Answer 3

Dutchie432 द्वारा उपरोक्त उत्तर से कोड

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

Answer 4

overflowसंपत्ति का उपयोग करें

overflow: hidden; 

overflow: auto;

overflow: scroll;