2011-01-10 13 views
63

की तय कंटेनर के भीतर div के लिए स्क्रॉलबार पाने के लिए मैं निम्नलिखित मार्कअप है:,सीएसएस: कैसे ऊंचाई

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

कारण इसकी सामग्री के लिए की ऊंचाई:

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

सीएसएस इस तरह दिखता है div.Content आमतौर पर div.FixedHeightContainer द्वारा प्रदान की गई जगह से अधिक है। फिलहाल, div.Content ख़ुशी से div.FixedHeightContainer के नीचे से बाहर फैली हुई है - मैं बिल्कुल नहीं क्या चाहते हैं।

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

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

उत्तर

109

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

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

+0

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

+6

यदि आप 'Content' एक निश्चित ऊंचाई देने के लिए, आप नहीं देना चाहिए', एक निश्चित ऊंचाई FixedHeightContainer' क्योंकि आप, कैसे उच्च अपने शीर्षक होगा पता नहीं कर सकते हैं तो 'Content' बाहर धक्का दे दिया जा सकता है। देखें: http://jsfiddle.net/ftkbL/2/ आपको 'ओवरफ़्लो: स्क्रॉल' वाले तत्व पर निश्चित ऊंचाई ** केवल ** सेट करना चाहिए। देखें http://jsfiddle.net/ftkbL/3/ या http://jsfiddle.net/ftkbL/4/ – RoToRa

+0

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

संबंधित मुद्दे