Inner div zu scrollen, wenn das äußere div zu klein ist?

Question

Ich versuche, eine Sidebar, die auf einer Website, die ein "Panel" mit Kontaktinfo haben wird. Das Problem ist, dass der Text auf kleineren Bildschirmen den Hintergrund überläuft. Hier

ist die CSS, wo #navigation die äußere div ist und die innere div wird .innerPanel HTML genannt zu folgen:

#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; 
    } 

`

Hier ist das HTML-Fragment. Die verschachtelten div Tags für abgerundete Ecken waren, die von den Kunden „nixed“ waren

 <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> 

Ich brauche eine Cross-Browser-Lösung zu machen innerPanel dynamisch eine Scrollbar selbst, so dass auf kleineren Bildschirmen hinzufügen, wird der Inhalt abgeschnitten aber zugänglich über scroll ...

Vorzugsweise sollte die Lösung reines CSS sein.

Irgendwelche Ideen?

EDIT: Ich entschuldige mich für die Mehrdeutigkeit. Ich habe eine Sidebar namens #navigation. Es enthält ein Logo, das Menü und die Kontaktinformationen. Ich möchte, dass die Kontaktinformationen an den gewünschten Stellen angezeigt werden.
Alles andere scheint auf 800x600-Bildschirmen und höher normal zu sein.

EDIT: Wie es jetzt steht, ist innerPanel eine feste Höhe. Ich möchte, dass es wächst, wenn es möglich ist, und wenn genug Platz ist, entferne die Bildlaufleiste. Bitte beachten Sie, dass in der CSS, die in innerPanel enthalten ist, ein HTML-div nicht erwähnt wird.

Answer 1

Ich bin ein wenig unklar, was Sie fordern, aber es scheint mir, entweder Sie overflow:auto auf dem #navigation Element möchten, oder auf Ihrem Inhalt abhängig und warum es hat eine feste Höhe:

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

FUNKTIONIERT NICHT IN IE6
IE6 unterstützt max-height nicht.