2013-04-25 50 views
0

我的情況: 在我的頁面上,我的主要內容的右側欄中有多個可摺疊面板。 目前發生的情況是,當我展開面板(其中包含大量文本)時,它會離開頁面。 因此意味着用戶無法閱讀它。這是因爲高度是硬編碼的。 現在我想要發生的是當div展開時,如果達到頁面的最大高度,頁面高度將擴展以合併所有文本。響應頁面高度作爲div展開html css

問題: 有沒有辦法讓頁面高度與div一起擴展?

我的CSS:

.container { 
    width: 1000px; 
    margin: 0px auto; 
    background-color:White; 
    height: 0px auto; 
} 
#page { 
    overflow: hidden; 
    width: 900px; 
    padding: 0px 50px 50px 50px; 
    background-color: #FFFFFF; 
} 
#content { 
    float: right; 
    width: 580px; 
} 

三江源的任何建議

回答

0

您可以.container一個clearfix所以它會擴展到其內部的浮動元素的大小。這裏是使用clearfix的a great article

.container { 
    width: 1000px; 
    margin: 0px auto; 
    background-color:White; 
    height: 0px auto; 
} 

.container:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

該代碼會爲一切工作的IE6 & 7.之外如果您需要東星也只是看看這篇文章。

+0

嗨,沒有遺憾的代碼無法正常工作......當我運行它的頁面只是一片空白,可能是由於隱藏屬性? – Callum 2013-04-25 08:37:42

+0

對不起,我犯了一個錯誤,再試一次 – 2013-04-25 08:39:29

+0

嗯,沒有,不工作eithe..strange – Callum 2013-04-25 08:40:53

0

除了使用高度,您可以嘗試將位置設置爲「絕對」,0px頂部和bot上的.container?

.container { 
    width: 1000px; 
    margin: 0px auto; 
    background-color:White; 
    top: 0px; 
    bottom: 0px; 
} 
0

別介意傢伙,我解決了這個問題....這是由於這樣的事實,我是用定位相對高度和寬度的DIV,所以我只是用的margin-top來代替。

感謝大家