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