我有一个大小正确的 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 溢出了。
感谢您的帮助
最佳答案
我通过像这样减去像素高度来巧妙地解决了这个问题:
.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>
这对我来说似乎并不“干净”,但现在它必须这样做。
关于html - 使用 Bootstrap 的 nav-tabs 导致子 div 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47444635/