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

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

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

不在IE6中工作
IE6不支持max-height。

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

1 个答案: