【发布时间】：2013-09-01 13:07:06
【问题描述】：
当标签内容由于内部内容与其底部 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>
这是一个在单击选项卡时更改内容的框。当我选择第 4 个 div 时，页脚出现问题，它与页脚重叠，但增加页面高度是否应该向下滚动其底部 div 意味着页脚 但它并没有滑下来。
我创建的4个div是tab，tab内容是点击tab内容变化时与之对齐的div，第一个div是active div。
我的页脚对于我的其他网站页面是通用的。我应该添加什么 CSS 或 jQuery 以使我的标签框正常工作？
【问题讨论】：