Html 如果外部div太小，是否要滚动内部div？

我试图在一个网站上做一个边栏，里面有一个包含 联系方式。问题在于，在较小的屏幕上，文本会溢出背景

这是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@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>

联系方式
城市办公室（9-6月）

电话：555-555-5555

传真：555-555-5555

电邮：email@provider.com

地址：伊利诺伊州主大道123号，邮编：11234

夏令营（七月及八月）

电话：987-654-3210

传真：123-456-1234

电邮：email@provider.com

地址：阿拉巴马州无处中心路456号，邮编67891

我需要一个跨浏览器的解决方案，使

innerPanel

动态添加一个滚动条，以便在较小的屏幕上，内容被剪裁，但可以通过滚动访问

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

有什么想法吗

编辑：我为这个模棱两可的问题道歉。我有一个侧边栏，叫做

#导航

。它包含徽标、菜单和联系信息。我想在需要的地方滚动联系人信息。
在800x600及以上的屏幕上，所有其他内容似乎都能正常显示

编辑：现在，innerPanel是一个固定高度。我希望它在可能的时候成长，如果有足够的空间，消除滚动条。

---

请注意，CSS中没有提到一个HTML div，它包含在

innerPanel

中。我有点不清楚您在问什么，但在我看来，您可能希望导航元素上有

溢出：自动

，或者取决于您的内容和它具有固定高度的原因：

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

在IE6中不起作用

---

IE6不支持

max height

应该是最小高度还是最大高度？@Moshe，这取决于为什么一开始就有一个固定高度。如果需要保持设置的高度，则您的

溢出：auto

必须位于父元素上：

#navigation

。例如，如果您的固定高度是如此之小，以至于小盒子从未超过您的背景，那么

上的
max height
和
overflow:auto
。innerPanel

将适用于您。暂时使用此选项-如果有人有其他答案，请分享。