Div bên trong để cuộn nếu div bên ngoài quá nhỏ?

Question

Tôi đang cố gắng tạo thanh bên trên trang web sẽ có "bảng điều khiển" trong đó chứa thông tin liên hệ . Vấn đề là trên màn hình nhỏ hơn, văn bản tràn nền.

Đây là CSS, nơi #navigation là div bên ngoài và các div bên trong được gọi là .innerPanel HTML để làm theo:

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

'

Dưới đây là đoạn mã HTML. Các lồng nhau div thẻ là cho góc tròn, mà là "nixed" bởi khách hàng

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

Tôi cần một giải pháp qua trình duyệt để làm innerPanel động thêm một thanh cuộn để bản thân để trên màn hình nhỏ hơn, nội dung được cắt bớt nhưng có thể truy cập qua cuộn ...

Tốt hơn, giải pháp phải là CSS thuần túy.

Bất kỳ ý tưởng nào?

EDIT: Tôi xin lỗi vì sự mơ hồ. Tôi có một thanh bên, được gọi là #navigation. Nó chứa một logo, menu và thông tin liên lạc. Tôi muốn thông tin liên hệ cuộn khi cần.
Mọi thứ khác có vẻ hiển thị bình thường trên màn hình 800x600 trở lên.

EDIT: Hiện tại, innerPanel là chiều cao cố định. Tôi muốn nó phát triển khi có thể, và nếu có đủ chỗ, hãy loại bỏ thanh cuộn. Xin lưu ý rằng có một div HTML không được đề cập trong CSS, được chứa bên trong của innerPanel.

Answer 1

Tôi là một chút không rõ ràng những gì bạn đang yêu cầu, nhưng có vẻ như với tôi bạn có muốn overflow:auto trên các yếu tố #navigation, hoặc tùy thuộc vào nội dung của bạn và lý do tại sao nó có một chiều cao cố định:

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

KHÔNG LÀM VIỆC TRÊN IE6
IE6 không hỗ trợ max-height.