如果外部div太小，要滚动的内部div？

Question

我试图做一个侧边栏，它将在一个网站上有一个“面板”，其中包含 联系信息。问题是，在较小的屏幕上，文本会溢出背景。

这里是CSS，其中#navigation是外层的div和内DIV称为.innerPanel HTML遵循：

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

`

下面是HTML片段。嵌套0​​标签是圆角的，这是“nixed”客户端

 <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动态的滚动条上的小屏幕添加到自身，这样，内容被剪切但通过滚动访问...

最好，解决方案应该是纯粹的CSS。

任何想法？

编辑：我为歧义道歉。我有一个侧栏，名为#navigation。它包含一个标志，菜单和联系信息。我想要联系信息在需要的地方滚动。
其他所有内容似乎都能在800x600或更高的屏幕上正常显示。

编辑：现在看来，innerPanel是一个固定的高度。如果可能，我希望它增长，如果有足够的空间，请取消滚动条。 请注意，CSS中没有提到HTML div，它包含在innerPanel的内部。

Answer 1

我有点不清楚你问什么，但在我看来，你要么需要overflow:auto的#navigation元素，或取决于你的内容，为什么它有一个固定的高度：

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

不适用于IE6
IE6不支持max-height。