让手风琴占据全高，让每个单独的窗格占据整个视口高度。 (Bootstrap 4)

Question

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>

我查看了一些类似的问题，none 到目前为止对我有所帮助。我需要第 1 部分的卡体根据用户的观点采取全高，尽管卡体内部有大量内容，并将第 2 部分的卡头一直推到手风琴的底部。感谢任何帮助或进一步参考。

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

Answer 1

看看这个片段：

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

这里我们在 <div class="card-body"> 上应用 style="height: 85vh;" 以增加它的高度 up-to view-port 高度的 85%。

如果要添加更多卡片，则需要降低此高度，以便在其中一张卡片展开时显示其他卡片headers。

Answer 2

基本思路是将手风琴高度设置为100%视口高度，将手风琴在列方向显示为flexbox，并扩大打开的部分（使用flex-grow:1;)，这样它就会占据剩余的space垂直。

这样您就不必为身高硬编码任何数字。

如果 Bootstrap 能够扩展折叠插件以便我可以将任何 CSS class 添加到 parent 谁有可折叠的 child。当前，当您单击 header 时，可折叠部分将打开，并且 .show class 仅添加到该可折叠部分，而不是其 parent .card。

要识别哪个 .card 是开放的，我们需要以下 JavaScript 利用 Bootstrap Collapse Events:

$(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');
    });
});

这里当我们切换可折叠时，我 add/remove a CSS class .show 在它的 parent .card.

现在我们知道打开可折叠 child 时打开了哪个 .card。我们可以开始写 CSSs 让手风琴占据 100% 的视口高度。

首先，我想为这个 100% 视口高度功能介绍一个单独的 CSS class。我们称它为 .accordion-vh-100。我所做的另一个更改是将 .card-header 从 div 更改为锚标记，以便整个 .card-header 都可以点击：

<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 的样式以占据 100% 的视口高度，并显示为具有列流向的 flexbox：

.accordion-vh-100 {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

最后，我们需要扩大打开的 .card:

.accordion-vh-100 .card.show {
    flex-grow: 1;
}

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

让手风琴占据全高，让每个单独的窗格占据整个视口高度。 (Bootstrap 4)

Getting the accordion to take full height and each individual panes to take the full viewport height. (Bootstrap 4)

html

css

bootstrap-4

accordion

bootstrap-accordion