jquery - Bootstrap 选项卡中的子 div 不占用父 div 的高度

Question

我正在开发一个 Bootstrap 选项卡，其中子 div 应该采用父 div 的高度。由于children div的内容会动态变化，无法设置children 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>