子div没有在引导选项卡中取得父div的高度

Question

我正在一个引导选项卡中的子div应该采取的高度是父div。由于儿童div的内容会动态变化，因此我无法设置儿童div的高度。现在我正在使用jQuery计算高度，并且它在tab1中工作正常，但在tab2中，同样的jQuery代码不起作用。这是在线链接，您将能够看到蓝色的div没有取得父级div的高度。 http://www.anotheritdude.com/clients/index.html

$(document).ready(function() { 
 
    ////for func block//// 
 
    $('.func_left').each(function() { 
 
    var parentheight = ($(this).parent().height()); 
 
    $(this).height(parentheight); 
 

 
    }); 
 
    ////for user block//// 
 
    $('.user_left').each(function() { 
 
    var parentheightUser = ($(this).parent().height()); 
 
    $(this).height(parentheightUser); 
 
    }); 
 
});

.func_block { 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px #ff732f solid; 
 
    margin-bottom: 10px; 
 
} 
 

 
.func_left { 
 
    float: left; 
 
    display: table-cell; 
 
    background: #ff732f; 
 
    color: #fff; 
 
    padding: 5px; 
 
    width: 15%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.func_right { 
 
    float: right; 
 
    display: table-cell; 
 
    background: #fff; 
 
    color: #ff732f; 
 
    padding: 5px; 
 
    width: 85% 
 
} 
 

 
.user_block { 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px #5eaeff solid; 
 
    margin-bottom: 10px; 
 
} 
 

 
.user_left { 
 
    float: left; 
 
    display: table-cell; 
 
    background: #5eaeff; 
 
    color: #fff; 
 
    padding: 5px; 
 
    width: 15%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.user_right { 
 
    float: right; 
 
    display: table-cell; 
 
    background: #fff; 
 
    color: #5eaeff; 
 
    padding: 5px; 
 
    width: 85% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-content clearfix"> 
 
    <div class="tab-pane active" id="1a"> 
 
    <div class="func_block"> 
 
     <div class="func_left" style="background: #ff732f;"> HR </div> 
 
     <!--recurring blocks--> 
 
     <div class="func_right"> test content </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 

 
    <!--recurring blocks--> 
 
    <div class="func_block"> 
 
     <div class="func_left" style="background: #ff732f;"> PSR </div> 
 
     <div class="func_right"> <span class="func_content">test content</span> <span class="func_content">test content test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>  <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test conten,t test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>  <span class="func_content">test content</span> <span class="func_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 

 
    </div> 
 
    <div class="tab-pane" id="2a"> 
 
    <!--recurring blocks--> 
 
    <div class="user_block"> 
 
     <div class="user_left"> HR </div> 
 
     <div class="user_right"> <span class="user_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 
    <!--recurring blocks--> 
 
    <div class="user_block"> 
 
     <div class="user_left"> HR </div> 
 
     <div class="user_right"> <span class="user_content">test content</span> <span class="user_content">test content test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>  <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test conten,t test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>  <span class="user_content">test content</span> <span class="user_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 
    </div> 
 
</div>

Answer 1

这是你想要做什么？我用display: flex而不是table，删除float属性和jQuery。

.func_block { 
 
    display: flex; 
 
    width: 100%; 
 
    border: 2px #ff732f solid; 
 
    margin-bottom: 10px; 
 
} 
 

 
.func_left { 
 
    background: #ff732f; 
 
    color: #fff; 
 
    padding: 5px; 
 
    width: 15%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.func_right { 
 
    background: #fff; 
 
    color: #ff732f; 
 
    padding: 5px; 
 
    width: 85% 
 
} 
 

 
.user_block { 
 
    display: flex; 
 
    width: 100%; 
 
    border: 2px #5eaeff solid; 
 
    margin-bottom: 10px; 
 
} 
 

 
.user_left { 
 
    background: #5eaeff; 
 
    color: #fff; 
 
    padding: 5px; 
 
    width: 15%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.user_right { 
 
    background: #fff; 
 
    color: #5eaeff; 
 
    padding: 5px; 
 
    width: 85% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-content clearfix"> 
 
    <div class="tab-pane active" id="1a"> 
 
    <div class="func_block"> 
 
     <div class="func_left" style="background: #ff732f;"> HR </div> 
 
     <!--recurring blocks--> 
 
     <div class="func_right"> test content </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 

 
    <!--recurring blocks--> 
 
    <div class="func_block"> 
 
     <div class="func_left" style="background: #ff732f;"> PSR </div> 
 
     <div class="func_right"> <span class="func_content">test content</span> <span class="func_content">test content test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>  <span class="func_content">test content</span> <span class="func_content">test content</span> <span class="func_content">test conten,t test content</span> <span class="func_content">test content</span> <span class="func_content">test content</span>  <span class="func_content">test content</span> <span class="func_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 

 
    </div> 
 
    <div class="tab-pane" id="2a"> 
 
    <!--recurring blocks--> 
 
    <div class="user_block"> 
 
     <div class="user_left"> HR </div> 
 
     <div class="user_right"> <span class="user_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 
    <!--recurring blocks--> 
 
    <div class="user_block"> 
 
     <div class="user_left"> HR </div> 
 
     <div class="user_right"> <span class="user_content">test content</span> <span class="user_content">test content test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>  <span class="user_content">test content</span> <span class="user_content">test content</span> <span class="user_content">test conten,t test content</span> <span class="user_content">test content</span> <span class="user_content">test content</span>  <span class="user_content">test content</span> <span class="user_content">test content</span> </div> 
 
    </div> 
 
    <!--recurring blocks--> 
 
    </div> 
 
</div>

Answer 2

你可以用CSS只使用Flexbox的做到这一点。 align-items的默认设置是'拉伸'，这意味着它们将覆盖从上到下。

.container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.container>div { 
 
    background-color: orange; 
 
    width: 40%; 
 
    border: thin solid blue; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="left">Update</div> 
 
    <div class="right">Insert</div> 
 
</div>