子divは、ブートストラップタブで親divの高さを取っていません

Question

私は、子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

あなたが何をしようとして、このですか？私はtableの代わりにdisplay: flexを使用し、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でこれを行うことができます。 align-itemsのデフォルト設定は「ストレッチ」です。つまり、上から下までカバーします。おかげでたくさん@ovokuro

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