html - 使用 Bootstrap 的 nav-tabs 导致子 div 溢出

Question

我有一个大小正确的 div，我想在其中放置选项卡和一些子 div。内部 div 将是可滚动的。当选项卡不存在时，这可以正常工作。

当我添加 Bootstrap nav-tabs 时，它们将子 div 向下“推”，它溢出了选项卡的高度。我该如何定义“此 div 应占用父级 剩余 空间的 100%？

”这样的内容？

<div class="fill" id="div-camera-details"> <!--This div is correctly sized, it has max-height set to 100%-->
    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
        <li class="nav-item" id="overview-tab-button"><a class="nav-link" data-toggle="tab"
                                                         href="#overview-tab">Přehled</a></li>
        <li class="nav-item" id="gallery-tab-button"><a class="nav-link active" data-toggle="tab"
                                                        href="#gallery-tab">Galerie</a></li>
    </ul>
    <div class="container-fluid fill highlight-border-solid">
        <div class="tab-content fill">
            <div role="tabpanel" class="tab-pane" id="overview-tab">
                <div>Some content</div>
            </div>
            <div role="tabpanel" class="tab-pane in active fill" id="gallery-tab">
                <div class="container y-scrollable">
                    <div>Some looong content</div>
                </div>
            </div>
        </div>
    </div>
</div>

This is a simple depiction of what I have.在底部你可以看到溢出。浅灰色边框是内容应该结束的地方。实线边框(用于调试)是由 highlight-border-solid 类引起的，可以看出，div 溢出了。

感谢您的帮助

Answer 1

我通过像这样减去像素高度来巧妙地解决了这个问题:

.tab-body {
    height: calc(100% - 41px);
}

使用 HTML:

<div class="fill" id="div-camera-details"> <!--This div is correctly sized, it has max-height set to 100%-->
    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
        <li class="nav-item" id="overview-tab-button"><a class="nav-link" data-toggle="tab"
                                                         href="#overview-tab">Přehled</a></li>
        <li class="nav-item" id="gallery-tab-button"><a class="nav-link active" data-toggle="tab"
                                                        href="#gallery-tab">Galerie</a></li>
    </ul>
    <div class="container-fluid tab-content tab-body">
            <div role="tabpanel" class="tab-pane" id="overview-tab">
                <div>Some content</div>
            </div>
            <div role="tabpanel" class="tab-pane in active fill" id="gallery-tab">
                <div class="container y-scrollable">
                    <div>Some looong content</div>
                </div>
            </div>
    </div>
</div>

这对我来说似乎并不“干净”，但现在它必须这样做。