2013-06-05 33 views
0

我已經使用jQueryCollapse插件來顯示問題和答案。 問題寫在選項卡上,當我們點擊選項卡時顯示答案。 選項卡處於活動狀態意味着在此時顯示答案時頁面高度增加,因此我必須增加背景圖像的高度。 對於我已經編碼如下:iphone瀏覽器的下列代碼有什麼問題?

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#main-content1').height(1450); 
    $("#t1").click(function(){ 
     var height = 1450; 
     $('#main-content1').height(height); 
    }); 
    $("#t2").click(function(){ 
     var height = 1450; 
     $('#main-content1').height(height); 
    }); 
    $("#t3").click(function(){ 
     var height = 1275; 
     $('#main-content1').height(height); 
    }); 
    $("#t4").click(function(){ 
     var height = 1250; 
     $('#main-content1').height(height); 
    }); 
</script> 

id的主內容的CSS代碼如下:

#main-content1 { 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:35px; 
    width:900px; 

    border-top-left-radius:48px; 
    border-top-right-radius:48px; 
    border-bottom-left-radius:48px; 
    border-bottom-right-radius:48px; 
    padding-bottom:20px; 
    height:1450px; 
    background:url(res/back-img.png) repeat; 
} 

的頁腳的代碼如下:

#footer { 
    border-top: 0px solid #003366; 
    overflow:visible; 
} 

.foot { 
    float:left; 
    list-style-type:none; 
    margin-bottom:20px; 
    background-image:url(res/footer_back.png); 
    background-repeat:no-repeat; 
    overflow:visible; 
    margin-top:-50px; 
    background-position:0px 120px; 
    width:182px; 
    height:180px; 
} 

img { 
    border-color:transparent; 
} 

#site-footer { 
    width:728px; 
    margin-left:auto; 
    margin-right:auto; 
} 

當我點擊選項卡時,它會顯示答案,但不會增加它的背景圖像高度,根據iPhone手機瀏覽器上的jQuery代碼。但它在Windows PC瀏覽器上工作正常。 內容將落後於頁腳。 我做了Google,但我沒有得到如何解決這個問題。 請任何人幫我解決這個問題。 在此先感謝..

+0

添加你'footer' CSS以及 – Morpheus

+0

這似乎是一個結構性問題?需要你的CSS。 – Jai

+0

@Morpheus:我已經添加了頁腳css代碼也.. –

回答

0

尚未測試,但嘗試最大高度而不是高度/或自動高度。

CSS

#main-content1 { 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:35px; 
    width:900px; 

    border-top-left-radius:48px; 
    border-top-right-radius:48px; 
    border-bottom-left-radius:48px; 
    border-bottom-right-radius:48px; 
    padding-bottom:20px; 
    max-height:1450px; /* height:auto; */ 
    background:url(res/back-img.png) repeat; 
}