我試圖做一個側邊欄,它將在一個網站上有一個「面板」,其中包含 聯繫信息。問題是,在較小的屏幕上,文本會溢出背景。如果外部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片段。嵌套0標籤是圓角的,這是「nixed」客戶端
<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 & 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
的內部。
應該是最小高度還是最大高度? – Moshe 2009-12-04 19:43:40
@Moshe,這取決於你爲什麼有一個固定的高度開始。如果您需要保持一定的高度,那麼您的'overflow:auto'必須位於父元素上:'#navigation'。例如,如果您的固定高度如此小的方塊永遠不會大於您的背景,那麼'.innerPanel'上的'max-height'和'overflow:auto'將適用於您。 – 2009-12-04 19:45:35
暫時使用 - 如果任何人有其他答案,請分享。 – Moshe 2009-12-06 05:33:00