2013-06-05 27 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; 
}