外神不与内神一起扩张

Question

我正在开发跟随页。

我遇到的问题是表格结构。外层的div，我的容器没有随着标签的交替高度而展开。请看问题的图片。

我希望容器能扩展到标签的高度。

HTML:

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

有什么解决办法吗？请看链接，以便更好地了解问题。

谅谅

Answer 1

你必须改变这样的标签

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

Answer 2

在你的外层div id或类上设置这个样式，不管你有什么。

#ambition_container{
    background-color: #461f20;
    padding:20px 10px 10px 10px;
    position:relative;
    height:100%;
    overflow-y:auto;
    display:block
}

Answer 3

#ambition_container, #tabs{
overflow:hidden;
}

在你的CSS东西上添加这个规则。