The issue is arising because the total height is being calculated as
100% + the height of the tab element
.
To resolve this, you can utilize flexbox. Transform the container into a flex container and assign it 100% height. Then utilize the flex property on its children to decide if they should stretch to occupy the available space.
In your code, I have used the ngb-tabset element as the container and included the following CSS to ensure it takes up 100% of the space and displays the nav-tabs and tab-content in a column:
ngb-tabset {
display: flex;
flex-direction: column; /* displaying child elements in a column */
height: 100%; /* utilizing full available height */
}
The next step is to specify that the tab-content should stretch to occupy the remaining height after the nav-tabs, while preventing the nav-tabs from stretching:
ngb-tabset .nav-tabs {
flex: 0; /* no growth or shrinkage */
}
ngb-tabset .tab-content {
flex: 1; /* grow or shrink to fill the remaining space */
}
(Please note that I only added the CSS for the container in your live code, so some additional CSS might be achieving a similar effect, but typically both sets of CSS would be required.)
Example in Action: (I introduced a container with id ngb-tabset to replace the ngb-tabset element in your Angular code)
body,html {
height: 100%;
margin: 0px;
padding: 0px;
}
#ngb-tabset, ngb-tabset {
display: flex;
flex-direction: column;
height: 100%;
}
#ngb-tabset .nav-tabs, ngb-tabset .nav-tabs {
flex: 0; /* no growth or shrinkage */
}
#ngb-tabset .tab-content, ngb-tabset .tab-content {
flex: 1; /* grow or shrink to fill the remaining space */
}
.tab-pane {
height: 100%;
}
.border2 { border: 1px solid blue;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div id="ngb-tabset">
<ul class="nav nav-tabs justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="" role="tab" id="nav-tabContent" aria-controls="nav-tabContent-panel" aria-expanded="true" aria-disabled="false">
Relación causa con Emoción
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="nav-tabContent-panel" aria-expanded="true">
<div class="border2 h-100">holi</div>
</div>
</div>
</div>