gpt4 book ai didi

css - 使选项卡的内容占据 100% 的可用空间并避免垂直滚动条

转载 作者:行者123 更新时间:2023-12-04 15:18:17 25 4
gpt4 key购买 nike

<分区>

我试图让 tab 内容占用 100% 的可用空间。但出于某种原因,它正在生成一个 vertical scroll 因为显然它正在增加选项卡的高度。如何让标签的内容占据可用空间而不产生垂直滚动?

我正在使用 ng-bootstrap,如果您不熟悉 Angular 不用担心,在此实时代码中您应该只会看到 styles.css 文件和/app/app.component.html:https://stackblitz.com/edit/angular-ng-bootstrap-9obrp7?file=app%2Fapp.component.html

enter image description here

注意:我可以用溢出来解决这个问题,但我想知道为什么我会遇到这个问题?

附加说明:ngb-tabset 添加了 2 个类为 .tab-content.tab-pane 的元素,我设置了它们 100% 高度,否则标签内容不会增长。

这是我的代码:

<ngb-tabset [destroyOnHide]="false">
<ngb-tab id="nav-tabContent" class="h-100 border1" title="Relación causa con Emoción">
<ng-template ngbTabContent>
<div class="border2 h-100">holi</div>
</ng-template>
</ngb-tab>
</ngb-tabset>

body,html{
height:100%;
margin:0px;
padding:0px;
}

.h-100{
height:100%;
}

.tab-content {
height:100%;
}
.tab-pane {
height: 100%;
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com