CSS 溢出滚动(引导)

Question

我正在尝试“拉伸(stretch)”或扩展第 1 列中的 A 部分以填充该行的高度。

1行2列:

+---------------------+---------------------+
|      Column 1       |      Column 2       |
|                     |                     |
| +-----------------+ | +-----------------+ |
| |      Button     | | | Section B       | |
| +-----------------+ | | Expand/collapse | |
|                     | +-----------------+ |
| +-----------------+ |                     |
| | Section A       | | +-----------------+ |
| |                 | | | Section C       | |
| | Expands to      | | |                 | |
| | height of 2nd   | | |                 | |
| | Column 2,       | | |                 | |
| | inner contents  | | |                 | |
| | scroll          | | |                 | |
+ +-----------------+ | +-----------------+ | 
+---------------------+---------------------+

“按钮”将文本生成到 A 部分。

A 部分应该扩展到填充高度并且溢出部分应该是可滚动的。

B 部分是一个可折叠面板。

C 部分也已生成。

第 2 列的高度应该“驱动”第 1 列的高度。

一个 fiddle 相当于 1,000 个单词，所以:https://jsfiddle.net/gnp47bLf/3/

我试过将高度设置为 100%，但这不起作用。单击生成按钮以动态加载一些文本。我不确定 CSS flex 属性是否可行或如何使用。正在使用 Bootstrap4 最新测试版。

Answer 1

flexbox utility在这些情况下，类(class)是你的 friend 。

为了实现所需的布局，.tab-pane 和 .results-wrapper 必须延伸到主行的底部。
所以为了到达那里，.d-flex 被添加到 .card-body 和 .h-100 到 .tab-pane 。然后，为了使 .results-wrapper 也能够到达行的底部，.d-flex .flex-column 也应用于 .tab-pane.与此同时，.results-wrapper 也被移动为 .tab-pane 的直接子级。

$().ready(function() {
    $('#generate').click(function() {
        html = '<ul>';
        for (let i = 0; i < 100; i++) {
            html += `<li>${i}</li>`;
        }
        html += '</ul>'
        $('#myText').html(html);
    })
});

.results-wrapper {
    overflow-y: scroll;
}

<div class="container-fluid">
    <div class="row border border-warn">

        <div class="col border border-success">
            <div class="card text-center h-100">
                <div class="card-header">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">TAB A</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">TAB B</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body d-flex">
                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane h-100 fade show active d-flex flex-column" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="row">
                                <div class="col">
                                    <button class="btn btn-sm btn-primary" id="generate">Generate</button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                I would like the grey area to stretch vertically based upon the row's overall height, but without hardcoding the height to a set pixel value.  Click the "Information" link to expand more data.
                                </div>
                            </div>

                            <div class="col results-wrapper">
                                <div class="col-12 results bg-secondary" id="myText">
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            Hi
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col border border-info">
            <div class="row" id="divItemInfo">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <a class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            <i class="fa" aria-hidden="true"></i>
                            <span id="div_current_item_information_header">Information</span>
                            </a>
                        </div>

                        <div class="card-body collapse" id="collapseExample">
                            <div id="div_current_item_information_body">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.                                       
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
                    <br/><br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
                    <br/><br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisl non risus venenatis finibus sed at dolor. Mauris aliquam libero nisl, condimentum ullamcorper turpis dignissim sed. Integer maximus a quam eu semper. Cras id enim non lorem ornare varius id et lacus. Ut molestie massa eu felis gravida tristique sit amet sed nisi. Maecenas id velit tortor. Suspendisse euismod rhoncus lectus cursus finibus. Praesent vestibulum scelerisque laoreet. Mauris vulputate semper nibh ac facilisis.
                </div>
            </div>
        </div>
    </div>

    <div class="row border border-primary">
        <div class="col">
            Another Column
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>