Div intérieur pour faire défiler si div externe est trop petit?

Question

J'essaye de faire une barre latérale qui sur un site Web qui aura un "panneau" dedans contenant l'information de contact. Le problème est que sur les petits écrans, le texte déborde le fond.

Voici le CSS, où #navigation est la div extérieure et la div interne est appelée .innerPanel HTML à suivre:

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

`

Voici le fragment HTML. Les div imbriqués balises étaient pour des coins arrondis, qui étaient « mis son veto » par le client

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

je besoin d'une solution multi-navigateur pour faire innerPanel ajouter dynamiquement une barre de défilement à lui-même de sorte que sur les petits écrans, le contenu est clipsé mais accessible via scroll ...

De préférence, la solution doit être pure CSS.

Des idées?

EDIT: Je m'excuse pour l'ambiguïté. J'ai une barre latérale, appelée #navigation. Il contient un logo, le menu et les informations de contact. Je veux que les informations de contact défilent si nécessaire.
Tout le reste semble afficher normalement sur les écrans 800x600 et plus.

EDIT: Dans l'état actuel, innerPanel est une hauteur fixe. Je voudrais qu'il croisse quand c'est possible, et s'il y a assez de place, éliminez la barre de défilement. S'il vous plaît noter qu'il existe un HTML div non mentionné dans le CSS, qui est contenue à l'intérieur de innerPanel.

Answer 1

Je suis un peu difficile de ce que vous demandez, mais il me semble que vous voulez, soit overflow:auto sur l'élément #navigation, ou en fonction de votre contenu et pourquoi il a une hauteur fixe:

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

NE FONCTIONNE PAS DANS IE6
IE6 ne prend pas en charge max-height.