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

Question

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

5

我正在尝试在网站上创建一个侧边栏，其中将包含一个名为“面板”的联系信息。问题在于，在较小的屏幕上，文字会溢出背景。

以下是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 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中。

- Moshe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Doug Neiner · Accepted Answer

我有点不清楚你的问题，但我认为你要么想在#navigation元素上使用overflow:auto，要么根据你的内容和为什么需要固定高度：

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

不支持IE6
IE6不支持max-height属性。