使手风琴达到最大高度，并使每个单独的窗格达到整个视口高度 引导程序4

问题描述

https://i.stack.imgur.com/LqhXn.png这不属于我，但可以清楚地解释我想要实现的目标。

下面是我当前的代码

<div class="accordion" id="myAccordion">
          <div class="card">
            <div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <h2 class="mb-0">
                <i class="fa fa-search" aria-hidden="true"></i> Section 1
              </h2>
            </div>
        
            <div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
              <div class="card-body">
                Some content here
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <h2 class="mb-0">
                 <i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
              </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
              <div class="card-body">
                some other content here
              </div>
            </div>
          </div>
            </div>
          </div>
        </div>

我已经问过一些类似的问题，到目前为止，没有一个问题有帮助。尽管卡体内的内容量很大，我仍需要根据用户的观点将section1的卡体取为全高，然后将section2的卡头一直推到手风琴的底部。任何帮助或进一步的参考表示赞赏。

[这就是我现在得到的结果->] https://i.stack.imgur.com/THCb9.png

解决方法

查看此代码段：

    <div class="accordion" id="myAccordion">
        <div class="card">
            <div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h2 class="mb-0">
                    <i class="fa fa-search" aria-hidden="true"></i> Section 1
                </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    Some content here
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2 class="mb-0">
                    <i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    some other content here
                </div>
            </div>
        </div>
    </div>

这里我们在style="height: 85vh;"上应用了<div class="card-body">，以将其高度增加到视口高度的85％。

如果要添加更多卡，则需要减小此高度，以在其中一张卡扩展时显示其他卡头。

,

基本思想是将手风琴高度设置为100％视口高度，在列方向上将手风琴显示为flexbox，并扩大打开的部分（使用flex-grow:1;)，以便它会垂直占据剩余空间。

通过这种方式，您不必为任何数字硬编码高度。

如果Bootstrap能够扩展折叠插件，那么我可以将其添加为纯CSS，这样我就可以向具有可折叠子代的父代添加任何CSS类。当前，当您单击标题时，可折叠部分打开，并且.show类仅添加到该可折叠部分，而不是其父类.card。

要确定哪个.card是打开的，我们需要使用Bootstrap Collapse Events的以下JavaScript：

$(function() {
    $('.accordion-vh-100 .collapse').on('show.bs.collapse',function () {
        $(this).parents('.card').addClass('show');
    });
    
    $('.accordion-vh-100 .collapse').on('hide.bs.collapse',function () {
        $(this).parents('.card').removeClass('show');
    });
});

在这里，当我们切换可折叠对象时，我在其父类.show上添加/删除了CSS类.card。

现在我们知道打开.card的可折叠子代时打开了哪个.accordion-vh-100。我们可以开始编写CSS，以使手风琴占据100％的视口高度。

首先，我想为此100％视口高度功能引入一个单独的CSS类。我们称之为.card-header。我进行的另一项更改是将.card-header从div更改为锚标记，以便可以单击整个<div class="accordion accordion-vh-100" id="myAccordion"> <div class="card"> <a class="card-header" href="#collapseOne" data-toggle="collapse"> <h2 class="mb-0">Section 1</h2> </a> <div id="collapseOne" class="collapse" data-parent="#myAccordion"> <div class="card-body">...</div> </div> </div> ... </div> ：

.accordion-vh-100

接下来，我们需要设置新的.accordion-vh-100 { height: 100vh; display: flex; flex-flow: column nowrap; } 的样式以使其占据100％的视口高度，并显示为具有列流向的flexbox：

.card

最后，我们需要扩展打开的.accordion-vh-100 .card.show { flex-grow: 1; } ：

;with max_prior_pk_cte as (
    select tt.pk,tt.pk2,max(ttt.pk) max_pk
    from
      #testTable tt
     join
      #testTable ttt on tt.pk2=ttt.pk2
                        and tt.pk>ttt.pk
    where tt.[status] is null
          and ttt.[status] in ('old','new')
    group by tt.pk,tt.pk2)
select
  t.*,t_prior.[status] new_status
from
  #testTable t
 left join
  max_prior_pk_cte mppc on t.pk=mppc.pk
 left join
  #testTable t_prior on mppc.max_pk=t_prior.pk;

演示： https://jsfiddle.net/davidliang2008/b1duyLs8/24/