फ्लोट को स्क्रॉल करना

Question

जब मैं एचटीएमएल/सीएसएस की बात करता हूं तो मैं काफी अनुभवहीन हूं, इसलिए कृपया मेरी मदद करें।

मैं निम्नलिखित लेआउट

<style> 
#main {background-color: red; width: 30%;} 
#right_al{float: right;} 
#to_scroll{overflow: scroll;} 
</style> 

<div id='main'> 
    <div id='right_al'> 
     CONTENT#foo 
     <div id='to_scroll'> 
     ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br />ZZZ<br /> 
     ZZZ<br />ZZZ<br />ZZZ<br /> 
     </div> 
    </div> 
    <div id='div1'>CONTENT #1</div> 
    <div id='div2'>CONTENT #2</div> 
    <div id='div3'>CONTENT #3</div> 
    <div id='div4'>CONTENT #4</div> 
    <div id='div5'>CONTENT #5</div> 
</div> 

है overflow: scroll#to_scroll अंदर दिखाने के लिए मैं क्या चाहते हैं, यह काम नहीं करता है। #right_al पैरेंट सीमा पार करता है और फ्लोट को साफ़ करने से माता-पिता के आकार में वृद्धि होगी, जो मैं नहीं चाहता हूं।

jsFiddle लिंक: http://jsfiddle.net/5ycnw/

क्या मैं चाहता हूँ माता पिता के अंदर छोड़ दिया पर झूठ DIV5 को

• div1 है।
• बाईं तरफ divs पैरेंट div की अधिकतम ऊंचाई तय करता है। दाईं ओर तैरने वाले div में एक बच्चा #to_scroll है जो इसकी सामग्री को #main ओवरफ़्लो करते समय स्क्रॉल करता है।

एक समाधान मैं शामिल right_al की ऊंचाई तय करने के साथ आया था, लेकिन माता-पिता #main की ऊंचाई छोड़ दिया divs पर सामग्री के अधीन है और मैं एक सीएसएस एकमात्र समाधान चाहते हैं।

अग्रिम धन्यवाद।

Answer 1

मेरे ऊपर टिप्पणी में उल्लेख किया है, W3C चश्मा जब क्योंकि कंटेनर के भीतर ऊंचाई इसकी कुल ऊंचाई को परिभाषित करने के लिए इस्तेमाल किया जाएगा कोई ऊंचाई दिया जाता है स्क्रॉल कंटेनर अनुमति नहीं दी जाएगी।

<div id="main"> 
<div id="main-column">...</div> 
<div id="side-bar"> 
    <div id="side-bar-header"> 
    Sidebar Header 
    </div> 
    <div id="side-bar-scroller"> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li>   
      <li>Option 4</li> 
      <li>Option 5</li> 
      <li>Option 6</li>     
      <li>Option 7</li> 
      <li>Option 8</li> 
      <li>Option 9</li> 
      <li>Option 10</li> 
      <li>Option 11</li> 
      <li>Option 12</li>    
     </ul> 
    </div> 

</div> 

:

http://jsfiddle.net/Moonbird_IT/kf3vD/

यहाँ मेरी HTML संरचना मैं डेमो में प्रयोग किया जाता है: यदि जे एस कोड का एक बिट का उपयोग कर एक विकल्प हो सकता है, निम्नलिखित फिडल पर एक नजर है

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

अनिवार्य हिस्सा इस छोटे से jQuery अनुदेश होगा:

$(document).ready(function() { 
    var mainHeight=$('#main-column').height();  
    var sidebarHeaderHeight=$('#side-bar-header').height();  
    $('#side-bar-scroller').css('height', mainHeight-sidebarHeaderHeight); 
});​ 

मैं क्रोम में कोड का परीक्षण केवल ताकि आप निश्चित रूप से आप एक डाल सकता है :-)

Answer 2

"सामग्री" divs के चारों ओर एक आवरण डाल, और फिर देना इस बात का एक नाव छोड़ दिया है।

<div id="content-container"> 
    <div id='div1'>CONTENT #1</div> 
    <div id='div2'>CONTENT #2</div> 
    <div id='div3'>CONTENT #3</div> 
    <div id='div4'>CONTENT #4</div> 
    <div id='div5'>CONTENT #5</div> 
</div> 


// CSS 

#content-container { float:left; } 
#main { height:auto; } 

मुख्य टैग बंद करने से पहले, एक सीएसएस स्पष्ट करें। इस जोड़ें:

<div style="clear:both"></div>