सीएसएस 100% चौड़ाई लेकिन स्क्रॉलबार से बचें

Question

यह शायद कुछ ऐसा हल हो गया है जिसे दर्जनों बार हल किया गया है लेकिन सीएसएस वास्तव में मुझे मूर्ख की तरह महसूस करता है।

मैं एक विजेट बनाने की कोशिश कर रहा हूं जिसे विभिन्न तरीकों से रखा जा सकता है और आकार दिया जा सकता है। यह एक बहुत ही सरल लेआउट है - फिक्स्ड-ऊंचाई हेडर, निश्चित-ऊंचाई पाद लेख, और एक शरीर जो शेष स्थान लेता है। कुल चौड़ाई और ऊंचाई बदलती है। शरीर की सामग्री को स्क्रॉल करने की जरूरत है। मेरे पास समग्र कंटेनर, हेडर, पाद लेख, और शरीर का आकार ठीक है।

लेकिन स्क्रॉलबार दिखाई देने पर बाईं ओर सामग्री को कम करने के बिना जब मैं चाहता हूं कि शरीर को स्क्रॉल करने के लिए मैं क्या चाहता हूं। यही है, मैं चाहता हूं कि शरीर उतना चौड़ा हो जितना कि वह स्क्रॉलबार को छोटा कर सकता है, अगर वहां स्क्रॉल करने की आवश्यकता होती है, तो जब इसे स्क्रॉल करने की आवश्यकता होती है तो कोई कमी नहीं होती है। वास्तव में, मैं यह चाहता हूँ:

| - - - unknown width - - -| 
+--------------------------+ 
| content    |*| 
| might     |*| 
| scroll     |*| 
+--------------------------+ 

मुझे वह सामग्री के रूप में व्यापक रूप में यह माइनस कर सकते हैं संभावित स्क्रॉलबार चौड़ाई होना करने के लिए स्क्रॉल कर सकते हैं चाहते हैं (| * | क्षेत्र)।

<div id="content" style="position: absolute; overflow-y: auto; width: 100%"> 
    <div id="scrollContent" style="???"> 
    </div> 
</div> 

मैं कोशिश की है मार्जिन, गद्दी, भीतरी सबसे div और सभी बात 'बदलाव करना' के लिए भी% -widths:

क्या मैं अब कुछ इस तरह है। मुझे एफएफ 3, आईई 7/8 और (फंतासी?) आईई 6 में काम करने की भी आवश्यकता है।

Answer 1

overflow: auto के बजाय overflow: scroll का उपयोग करें - जो हमेशा स्क्रॉलबार को हमेशा दिखाई देने के लिए मजबूर करेगा।

Answer 2

स्क्रॉल करने की कोई आवश्यकता नहीं होने पर भी स्क्रॉलबार को प्रदर्शित क्यों नहीं करते?

आप कंटेनर में overflow:scroll; सेट करके इसे प्राप्त कर सकते हैं।

Answer 3

उस तत्व के अंदर एक और रैपर जोड़ें जिसमें अतिप्रवाह होगा: ऑटो स्टाइल और इसे लगभग 18px संकुचित करने के लिए सेट करें। स्क्रॉलबार उस 18 पीएक्स अंतर में दिखाई देना चाहिए।

Answer 4

समस्या तब होती है जब आप कंटेनर पर होवर करते हैं और स्क्रॉलबार दिखाई देता है, तो सामग्री चौड़ाई कम हो जाती है। तो यहां तक ​​कि यदि आप एक नेस्टेड कंटेनर का उपयोग करते हैं, जिसकी चौड़ाई कंटेनर के बराबर है, तो इसकी स्क्रॉलबार से कम, नेस्टेड कंटेनर की चौड़ाई भी कम हो जाएगी।

एक समाधान हैवर पर स्क्रॉलबार की चौड़ाई से सामग्री के आकार को बढ़ाने के लिए है। यहाँ एक समाधान है कि किसी भी नेस्टेड बाहरी कंटेनरों का उपयोग करने की जरूरत नहीं है (categoryCont स्क्रॉल कंटेनर है और प्रत्येक menuBlock वस्तुओं में से एक स्क्रॉल किया जा रहा है) है:

ऊपर के साथ

<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;"> 
    <div class="menuBlock" style="width:200px">a</div> 
    <div class="menuBlock" style="width:200px">b</div> 
    <div class="menuBlock" style="width:200px">c</div> 
    ... 
</div> 

<style type="text/css"> 
    #categoryCont:hover{ 
     overflow-y: auto; 
    } 
    #categoryCont:hover .menuBlock{ 
    /* Increase size of menu block when scrollbar appears */ 
     width: 218px; /* Adjust for width of scroll bar. */ 
    } 
</style> 

एक मुद्दा यह है कि चौड़ाई स्क्रॉलबार के अलग-अलग ब्राउज़रों में थोड़ा अलग है।निम्न में से एक की मदद करनी चाहिए:

• पिक्सल

का उपयोग कर सामग्री बाईं मांगपत्र के साथ एक निरपेक्ष मान एक निरपेक्ष मान के रूप में

<div class="menuBlock" style="width:200px"> 
    <span>a</span> 
</div> 

<style> 
    .menuBlock span{  /* Good cross-browser solution but cannot use % */ 
     position:absolute; 
     left:70px; 
    } 
</style> 

को

<div class="menuBlock" style="width:200px"> 
    a 
</div> 

परिवर्तन करें द्वारा

• %

आप, दोनों सीएसएस और jQuery (प्रथम चरण में ही है) की जरूरत है

<div class="menuBlock" style="width:200px"> 
    <span>a</span> 
</div> 

<style> 
    .menuBlock span{  /* Good cross-browser solution but cannot use % */ 
     position:absolute; /* This one does not use 'left' */ 
    } 
</style> 

<script> 
    // Indent left 30% because container width remains same but content width changes 
    var leftIndent = (30/100) * $("#categoryCont").width(); 
    $(".menuBlock span").css({"left":leftIndent}); 
</script> 

Answer 5

को

<div class="menuBlock" style="width:200px"> 
    a 
</div> 

परिवर्तन मैं एक समस्या यह है कि इसी तरह की है कि मैं के लिए नीचे दिए गए समाधान का इस्तेमाल किया है था मैं मुझे यकीन नहीं है कि यह एक समाधान हो सकता है जो आप करना चाहते हैं, लेकिन यह हो सकता है।

मेरे पास एक div था जो स्वचालित रूप से सामग्री का आकार बदलता था, और फिर स्क्रॉल को अंदर से सिकुड़ते हुए जोड़ा गया था, ताकि उसमें तालिका को कंटेनर बनाने के बजाए टेक्स्ट को लपेट लिया गया हो। अवांछित प्रभाव नीचे दिए गए पुराने उदाहरण में देखा जाता है, यदि टेक्स्टरेरा का आकार बदलता है और स्क्रॉल प्रकट होता है।

मेरा बदसूरत समाधान अतिप्रवाह-वाई के अंदर एक div जोड़ने के लिए था: ऑटो-डिव, जो प्रदर्शित था: इनलाइन-ब्लॉक, और उसके बाद एक और छोटा इनलाइन-ब्लॉक div जोड़ने के लिए, यह 1 9 पिक्सल चौड़ा था (आरक्षित स्क्रॉलबार के लिए) और एक पिक्सेल उच्च। वह छोटा div असली div के बगल में दिखाई देगा जब ब्राउजर ने सामग्री को div का आकार बदल दिया था, और जब स्क्रॉलबार दिखाई देता है, तो छोटे div को असली div के नीचे धकेल दिया जाता है, और असली div इसे साथ रखता है। यह एक पिक्सेल नीचे "मार्जिन" का कारण बनता है, लेकिन उम्मीद है कि कोई समस्या नहीं है। जब कोई स्क्रॉलबार पपीर नहीं होता है, तो वास्तविक div के बगल में अप्रयुक्त स्थान के 1 9 पिक्सेल है, जैसा कि प्रश्न में वर्णित है।

पुरानी (सबसे बाहरी div मेरी सेटअप/समस्या को दोहराने के बस नहीं है।):

<div style="display:inline-block"> 
    <div style="max-height:120px; overflow-y:auto; border:1px solid gray"> 
    <table border=1><tr> 
     <td>I do not</td><td>want this to</td> 
     <td>add breaks in the text.</td> 
    </tr></table> 
    <textarea rows=3 cols=15>Resize me down</textarea> 
    </div> 
</div> 
<br> 

नई:

<div style="display:inline-block"> 
    <div style="max-height:150px;overflow-y:auto; border:1px solid gray"> 
    <div style="display:inline-block"> 
     <table border=1><tr> 
      <td>I do not</td><td>want this to</td> 
      <td>add breaks in the text.</td> 
     </tr></table> 
     <textarea rows=3 cols=15>Resize me down</textarea> 
    </div> 
    <div style="display:inline-block; width:19px; height:1px"></div> 
    </div> 
</div> 
<br>