如果外部 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 片段。嵌套的 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 protected]<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 protected]<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

我有点不清楚你在问什么，但在我看来，你要么想要 #navigation 元素上的 overflow:auto ，要么或，具体取决于你的内容及其原因固定高度：

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

不适用于 IE6
IE6 不支持最大高度。