jQuery標籤內容增加重疊內容到底部div

當標籤內容由於內部內容與其底部div重疊而增加高度時，創建了一個jQuery標籤內容更改器。jQuery標籤內容增加重疊內容到底部div

<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>

這裏是一個改變標籤點擊內容的框。當我選擇第四個div時，我遇到了頁腳問題，它與頁腳重疊，但增加了頁面高度，無論它應向下滾動其底部div，是否意味着頁腳，但它不會滑落。

我創建的4個div是標籤，標籤內容是與標籤內容的點擊改變時對齊的div，第一個div是活動div。

我的頁腳與我的其他網站頁面相同。我應該添加什麼CSS或jQuery來使我的標籤框工作正常？

來源

2013-08-29 Pratyush Goyal