बाहरी div बहुत छोटा है तो स्क्रॉल करने के लिए आंतरिक div?

Question

मैं एक साइडबार बनाने की कोशिश कर रहा हूं जिस पर एक वेबसाइट पर "पैनल" होगा जिसमें संपर्क जानकारी होगी। समस्या यह है कि छोटी स्क्रीन पर, पाठ पृष्ठभूमि को बहता है।

यहाँ, सीएसएस वह जगह है जहाँ #navigation बाहरी div है और भीतरी div .innerPanel एचटीएमएल कहा जाता है का पालन करने के:

#navigation{ 
     position: absolute; 
     left: 1.5625em; 
     top: 1.5625em; 
     bottom: 1.5625em; 
     display: block; 
     width: 12.5em; 
     background: navy; 
     border-right: 1px solid navy; 
     text-align: center; 
     background: #B6D2F0; 
     padding: 5px; 
     color: #4A4A49; 
     overflow: hidden; 
    } 

    #navigation .innerPanel{ 
     min-height: 200px; /* supply current height here */ 
     height: auto; 
     overflow: auto; 
    } 

    .titleHead{ 
    display: block; 
    padding-top: 0.9em; 
    overflow: auto; 
    } 


    /* inverted corners for the links */ 
    #navigation #links {  
     position: relative; 
     padding-top: 30px; 
    } 

    #navigation #links div div div h3{ 
     border-top: 1px solid navy; 
     border-bottom: 1px solid navy; 
     color: navy; 
     padding: 0px; 
     margin: 0px; 
     margin-top: 1px; 
     line-height: 1.2em; 
    } 

    #navigation div div div div ul{ 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
    } 

    #navigation div div div div ul li{ 
     text-align: center; 
    } 

    #navigation div div div div ul li a{ 
     display: block; 
     text-decoration: none; 
     font-weight: bold; 
     color: #B6D2F0; 
     padding: 0px; 
     padding-left: 0; 
     line-height: 2.5em; 
     background: navy; 
     border-bottom: #D8F4F2 1px dashed; 
     } 

    #navigation div div div div ul li a:hover{ 
     display: block; 
     text-decoration: none; 
     font-weight: bold; 
     color: #D8F4F2; 
     background: #0000A2; 
    } 

    #navigation div div div div ul #last a{ 
     border-bottom: 0px; 
    } 

`

यहाँ एचटीएमएल टुकड़ा है। नेस्टेड div टैग गोलाकार कोनों के लिए थे, जो थे ग्राहक

 <div id="navigation"> 
    <div id="logo" class="box"> 
     <div> 
     <div> 
      <div style="text-align: center;"> 
      <img src="./images/pictures/cbk-logo-sm.gif" alt="Logo" /> 
      </div> 
     </div> 
     </div> 
    </div> 
<div id="links" class="box"> 
     <div> 
     <div> 
      <div>    <ul> 
       <li id="home"> 
       <a href="index.php" title="Home">Home</a> 
       </li><li> 
       <a href="applications.php" title="Apply as a staff member or camper">Applications</a> 
       </li><li id="last"> 
       <a href="about.php" title="About our directors, our grounds and our campers">About</a> 
       </li> 
      </ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead"> 
      Contact Information</h4> 
       <h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5> 
       <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
      <em>Phone:</em> 555-555-5555<br /> 
      <em>Fax:</em> 555-555-5555<br /> 
      <em>Email:</em> email@provider.com<br /> 
      <em>Address:</em> 123 Main Avenue Somewhere, IL 11234 
      </p> 
      <h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July &amp; August)</h5> 
      <p style="font-size: 0.75em; margin: 0; padding: 0;"> 
      <em>Phone:</em> 987-654-3210<br /> 
      <em>Fax:</em> 123-456-1234<br /> 
      <em>Email:</em> email@provider.com<br /> 
      <em>Address:</em> 456 Centre Road, Nowhere, AL 67891 
      </p></div></div>  </div> 
     </div> 
     </div> 
    </div> 
    </div> 

मैं एक क्रॉस-ब्राउज़र समाधान की जरूरत है innerPanel गतिशील बनाने के लिए छोटी स्क्रीन पर ही करने के लिए एक स्क्रॉलबार जोड़ने कि इतने द्वारा "nixed", सामग्री क्लिप किया गया है लेकिन स्क्रॉल के माध्यम से सुलभ ...

अधिमानतः, समाधान शुद्ध सीएसएस होना चाहिए।

कोई विचार?

संपादित करें: अस्पष्टता के लिए मैं क्षमा चाहता हूं। मेरे पास साइडबार है, जिसे #navigation कहा जाता है। इसमें एक लोगो, मेनू और संपर्क जानकारी शामिल है। मैं संपर्क जानकारी चाहता हूं जहां आवश्यक हो वहां स्क्रॉल करें।
अन्य सभी सामान्य रूप से 800x600 स्क्रीन और ऊपर प्रदर्शित होते हैं।

संपादित करें: जैसा कि यह अभी खड़ा है, आंतरिक पैनल एक निश्चित ऊंचाई है। मैं इसे संभव होने पर बढ़ाना चाहता हूं, और यदि पर्याप्त कमरा है, तो स्क्रॉलबार को खत्म करें। कृपया ध्यान दें कि सीएसएस में एक HTML div का उल्लेख नहीं किया गया है, जो innerPanel के अंदर निहित है।

Answer 1

मैं एक छोटे से स्पष्ट नहीं है कि तुम क्या कह रहे हैं, लेकिन मुझे लगता है आप या तो अपने सामग्री के आधार पर चाहते हैं #navigation तत्व पर overflow:auto, या और क्यों यह एक निश्चित ऊंचाई है:

#navigation .innerPanel { 
    max-height: 200px; /* supply current height here */ 
    height: auto; 
    overflow: auto; 
} 

आईई 6
आईई 6 max-height का समर्थन नहीं करता है।