如何根據所有標簽中最大的標簽的最大升幅來給出所有標簽的頁面高度

Question

如何根據所有標簽中最大的標簽的最大升幅來給出所有標簽的頁面高度

例

<div id="" class="tab-pane fade  in active">
    <ul class="autoValidate nav nav-tabs nav-justified nav-thirdlevel hidden-xs">
        <li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab3</a></li>
    </ul>
    <div class="panel-group visible-xs" id="undefined-accordion"></div>
    <div class="tab-content tab-contentlevel hidden-xs stander-Page-Height">
        <div id="tab1" class="tab-pane fade active in"> // for example this tab height is 400px
            // something....
        </div>
        <div id="tab2" class="tab-pane fade"> // for example this tab height is 600px
            // something....
        </div>
        <div id="tab3" class="tab-pane fade"> // for example this tab height is 500px
            // something....
        </div>
    </div>
</div>

我如何使用（css || js || jquery）來獲取頁面中每個標簽的高度600px

非常感謝你

Answer 1

.tab-content { 
    display:flex; 
    flex-direction: row;
    align-items: strech
    // other css rules
}

將align-item設置為strech將強制所有子級填充其父級的高度。

Answer 2

添加以下CSS，所有標簽的高度為600px。

.tab-content {
  display: flex;
  height: 600px;
  align-items: stretch;
}
.tab-pane {
  display: block;
  margin: 10px;
  background: red;
}

編輯：添加了代碼段。

 .tab-content { display: flex; height: 600px; align-items: stretch; } .tab-pane { display: block; margin: 10px; background: red; } 

  <ul class="autoValidate nav nav-tabs nav-justified nav-thirdlevel hidden-xs"> <li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li> <li><a data-toggle="tab" href="#tab2">tab2</a></li> <li><a data-toggle="tab" href="#tab3">tab3</a></li> </ul> <div class="panel-group visible-xs" id="undefined-accordion"></div> <div class="tab-content tab-contentlevel hidden-xs stander-Page-Height"> <div id="tab1" class="tab-pane fade active in"> // for example this tab height is 400px // something.... </div> <div id="tab2" class="tab-pane fade"> // for example this tab height is 600px // something.... </div> <div id="tab3" class="tab-pane fade"> // for example this tab height is 500px // something.... </div> </div>