外部分区不与内部分区扩展
外部分区不与内部分区扩展
提问于 2014-02-04 11:29:43
我正在开发以下页面：
我遇到的问题是表格的结构。外部的div，我的容器并没有随着标签的交替高度而膨胀。见问题图像：
我想把集装箱延伸到标签高度。
<section class="x_section_wide">
<div id="ambition_container">
<div id="x_tools">
<span id="a_name">name</span>
</div>
<div class="x_content">
</div>
<div id="a_progress_bar">
<span id="a_progress">
</span>
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-2" checked>
<label for="tab-4" id="a_tab_one">1</label>
<div id="tab_information" class="tab_content">
<div id="a_extra_info">
<div id="a_extra_info_inner">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-2">
<label for="tab-5" id="a_tab_two">2</label>
<div id="tab_evidence" class="tab_content">
<div id="a_evidence">
<div id="a_evidence_inner">
2
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-6" name="tab-group-2">
<label for="tab-6" id="a_tab_three">3</label>
<div id="tab_comments"class="tab_content">
<div id="a_comments">
<div id="a_comments_inner">
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
<p>3</p><br/>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-7" name="tab-group-2">
<label for="tab-7" id="a_tab_four">4</label>
<div id="tab_supporters" class="tab_content">
<div id="a_supporters">
<div id="a_supporters_inner">
4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
用于此特定页面的CSS是：
#a_extra_info, #a_evidence, #a_comments, #a_supporters{
padding:30px;
}
#a_extra_info{
background-color: #E29FA4;
}
#a_evidence{
background-color: #B98489;
}
#a_comments{
background-color: #845F64;
}
#a_supporters{
background-color: #5E4549;
}
#a_extra_info_inner, #a_evidence_inner, #a_comments_inner, #a_supporters_inner{
background-color: #FFF;
/*padding: 10px;*/
}
#a_extra_info_inner span, #a_extra_info_inner label, #a_evidence_inner span, #a_evidence_inner label, #a_comments_inner span, #a_comments_inner label, #a_supporters_inner span, #a_supporters_inner label{
color: #000;
}
.tabs {
position: relative;
min-height: 276px; /* This part sucks */
clear: both;
}
.tab {
float:left;
width: 25%;
}
.tab > label {
text-align: center;
position: relative;
height:30px;
line-height: 30px;
font-weight: normal;
font-size: 100%;
cursor: pointer;
margin:0;
}
.tab [type=radio] {
display: none;
}
.tab_content {
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
}
[type=radio]:checked ~ label {
z-index: 2;
}
[type=radio]:checked ~ label ~ .tab_content {
z-index: 1;
}
#a_tab_one{
background-color: #E29FA4;
color:#000;
}
#a_tab_two{
background-color: #B98489;
color:#000;
}
#a_tab_three{
background-color: #845F64;
}
#a_tab_four{
background-color: #5E4549;
}有什么解决办法吗？请查看链接，以更好地查看问题。
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-04 12:26:36
你必须这样改变
制表符
<div class="tabs">
<div class="tab">
<div class="tab">
<div class="tab">
<div class="tab">
</div>标签css
.tabs {
clear: both;
height: 30px;
position: relative;
}并在content div中放置标签后的内容。
<div class="content" style="">
<div id="tab_information for tab1" class="tab_content" style="display: block;">
<div id="a_extra_info">
<div id="a_extra_info_inner">Place Content of tab 1</div>
</div>
</div>
<div id="tab_information for tab2" class="tab_content" style="display: none;">
<div id="a_extra_info">
<div id="a_extra_info_inner">Place Content of tab 2</div>
</div>
</div>
</div>Stack Overflow用户
发布于 2014-02-04 11:35:32
在您的外部div id或类上设置此样式。
#ambition_container{
background-color: #461f20;
padding:20px 10px 10px 10px;
position:relative;
height:100%;
overflow-y:auto;
display:block
}Stack Overflow用户
发布于 2014-02-04 12:31:09
#ambition_container, #tabs{
overflow:hidden;
}将此规则添加到CSS内容中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21551231
复制相关文章
相似问题
腾讯云开发者
