jQuery选项卡内容将重叠内容增加到底部div_Jquery_Html_Tabs

jQuery选项卡内容将重叠内容增加到底部div

jquery html tabs

jQuery选项卡内容将重叠内容增加到底部div,jquery,html,tabs,Jquery,Html,Tabs,当选项卡内容由于其内部内容与其底部div重叠而增加高度时，创建了jQuery选项卡内容转换器 <html> <head> <style> .mid_content{height:auto;width:1070px;margin:auto;} #footer{bottom:0;height: 50px;width: 100%;background-color: rgb(83,83,83);clear:both; margin: 50

当选项卡内容由于其内部内容与其底部div重叠而增加高度时，创建了jQuery选项卡内容转换器

<html>
 <head>
 <style>
     .mid_content{height:auto;width:1070px;margin:auto;}
     #footer{bottom:0;height: 50px;width: 100%;background-color:    rgb(83,83,83);clear:both; margin: 50px 0 0 0; position:relative;}
 tabs {
    float:left;
    height: 300px;
    width: 300px;
    margin: 10px 0 0 0;
}
div.active{
    background:#999;
    color:#333333;
}
div.tab_container div.active{
    background-color:#FFF;}
/*  di
v.tabs div.active{

} */
.tab_container {
    float:right;
    clear: both;
    height:300px;
    width: 700px;
    background:#FFFFFF;
    margin: 10px 0 0 0;
    border-radius:5px;
}

p#con_tab{
    text-align:left;
    font-weight:bold;
    color:#333333;
    font-size:20px;
    padding: 10px 0 0 10px;
    font:"MS Serif", "New York", serif;
}
.tab_content {
    height:290px;
    width:690px;
    display: none;
    background-color:#FFF;
    margin:auto;
    margin-top:5px;
}
#tab1{height:auto;}
#tab2{height:auto;}
#tab3{height:auto;}
#tab4{height:auto;}



 </style> 
 <script type="text/javascript">

$(document).ready(function() {

    $(".tab_content").hide();
    $(".tab_content:first").show(); 

    $("div.tabs div").click(function() {
        $("div.tabs div").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();

        var activeTab = $(this).attr("rel"); 
        $("#"+activeTab).fadeIn(); 
    });
});

 </script> 
  </head>
  <body>

<div class="mid_content">
<div class="tab_container"> 
    <div id="tab1" class="tab_content active">   
 <p id="con_tab">We aim to provide committed healthcare services to all our patients      through  dedicated research and Committed Clinical Excellence & Successes.</p>

    </div>
    <div id="tab2" class="tab_content"> 
 <p id="con_tab">Global Medi Consultants has committed itself to spread a healthy smile on all our clients faces.<br /> <br />All our clients are our family and we are committed to providing quality healthcare</p>
    </div>
    <div id="tab3" class="tab_content"> 

<p id="con_tab">Global Medi Consultants fill a very important void in the Medical travel domain and provide transparency in both quality of care and pricing.<br /> Our main goal is to provide a safe, affordable, and timely option to healthcare in house and across the globe for unavailable specialties.<br /> More specifically, to assist insured, uninsured, under-insured, or those stuck in long waiting lines to receive their medical treatments. <br /><br />Since long, we have been implementing an organized process of facilitation to our clients. In effect, they receive all the benefits of our knowledge and expertise we have gained over the years.</p>        
    </div>
    <div id="tab4" class="tab_content"> 
 <p id="con_tab">We are committed to the highest ethical, legal and professional standards and work with commitment.<br />                                                      We conduct ourselves with honesty and integrity in our dealings with and on behalf of our clients.<br />
                    We are accountable for our conduct and for compliance with applicable laws.<br />
                    We treat everyone with respect and dignity, and make no distinction based on medical condition, age, gender, disability, race, color, religion, national origin or place of residence.<br />
                    We are committed to the ethical and compassionate treatment of patients and compliance with established policies and statements of patient rights.<br />     <br />
                    We use confidential information only to carry out our work and do not share such information with others unless duly instructed by the patient or required on behalf of the patient.<br /><br />
                    We place the interests of our patients above our own.
                     We deal with patients, payers, vendors, and providers with honesty  and integrity.</p>
    </div>
</div>
<div class="tabs"> 
    <div class="active dash d_one" rel="tab1"><br /><h2>VISION</h2></div>
    <div class="dash d_two" rel="tab2"><br /><h2>MISSION</h2></div>
    <div class="dash d_three" rel="tab3"><h2>WHAT<br />WE DO</h2></div>
    <div class="dash d_four" rel="tab4"><h2>CODE<br />OF <br />CONDUCT</h2></div>

</div>
        <div class="clear"></div>

 </div>
 </body>
 </html>


.mid_内容{高度：自动；宽度：1070px；边距：自动；}
#页脚{底部：0；高度：50px；宽度：100%；背景色：rgb（83,83,83）；清除：两个；边距：50px 0；位置：相对；}
标签{
浮动：左；
高度：300px；
宽度：300px；
利润率：10px0；
}
活动分区{
背景：#999；
颜色：#333333；
}
div.tab_容器div.active{
背景色：#FFF；}
/*di
v、 选项卡分区活动{
} */
.tab_容器{
浮动：对；
明确：两者皆有；
高度：300px；
宽度：700px；
背景：#FFFFFF；
利润率：10px0；
边界半径：5px；
}
p#con#U选项卡{
文本对齐：左对齐；
字体大小：粗体；
颜色：#333333；
字体大小：20px；
填充：10px 0 10px；
字体：“MS Serif”，“纽约”，Serif；
}
.tab_内容{
高度：290px；
宽度：690px；
显示：无；
背景色：#FFF；
保证金：自动；
边缘顶部：5px；
}
#表1{高度：自动；}
#表2{高度：自动；}
#表3{高度：自动；}
#表4{高度：自动；}
$（文档）.ready（函数（）{
$（“.tab_content”）.hide（）；
$（“.tab_content:first”）.show（）；
$（“div.tabs div”）。单击（函数（）{
$（“div.tabs div”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab_content”）.hide（）；
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab.fadeIn（）；
});
});
我们的目标是通过专注的研究和承诺的临床卓越和成功，为所有患者提供承诺的医疗服务
全球医疗顾问公司致力于在我们所有的客户脸上传播健康的微笑。

我们所有的客户都是我们的家人，我们致力于提供优质的医疗保健
全球医疗顾问填补了医疗旅行领域的一个非常重要的空白，并在护理质量和定价方面提供了透明度。
我们的主要目标是为公司内部和全球范围内无法获得的专业医疗提供安全、经济、及时的选择。
更具体地说，是帮助被保险人，未投保、投保不足或长时间排队等待接受治疗的人

长期以来，我们一直在为客户提供有组织的便利。实际上，他们从我们多年来获得的知识和专业知识中获益匪浅。
我们致力于最高的道德、法律和专业标准，并以承诺的态度开展工作。
在与客户打交道时，我们以诚实和正直的态度行事。

我们对自己的行为和遵守适用法律负责。

我们以尊重和尊严对待每一个人，不因医疗状况、年龄、性别、残疾、种族、肤色、宗教、国籍或居住地而有所区别。

我们致力于对患者进行道德和同情治疗，并遵守既定的政策和患者权利声明。


我们仅在开展工作时使用保密信息，除非患者正式指示或代表患者要求，否则不与他人共享此类信息。


我们将患者的利益置于自身利益之上。
我们以诚实和正直的态度与患者、付款人、供应商和提供者打交道

愿景

任务
我们做什么
行为守则

这是一个框，单击选项卡可更改内容。当我选择第四个div时，页脚有问题，它与页脚重叠，但增加了页面高度，是否应该向下滚动底部div表示页脚但它不会滑下来

我创建的4个div是tab，tab内容是单击tab内容更改时与之对齐的div，第一个div是active div

我的页脚与我的站点页面的其余部分相同。我应该添加什么CSS或jQuery才能使我的选项卡框正常工作？

这是因为内容选项卡的包装

。选项卡容器的高度为300px。将其置于min高度：300px并且应该可以正常工作
我尝试将其高度设置为最小高度，但未对其产生任何影响。如果您检查我提供的测试中的代码，则与您的示例中的代码相同。我不知道你是否有其他因素影响你的行为，但它应该起作用。