Make the content of a tab occupy 100% of the available space and avoid a vertical scrollbar

Question

I'm trying to make the tab content take up 100% of the available space. but for some reason it is generating a vertical scroll because apparently it is adding the height of the tab. How can I make the content of the tab occupy the available space without generating the vertical scroll?

I am using ng-bootstrap, if you are not familiar with angular don't worry, in this live code you should only see the styles.css file and /app/app.component.html: https://stackblitz.com/edit/angular-ng-bootstrap-9obrp7?file=app%2Fapp.component.html

Note: I can fix this with an overflow, but I want to know why I am getting this problem?

Additional note: ngb-tabset adds 2 elements with class .tab-content and .tab-pane, I set them 100% height, otherwise the tab content would not grow.

This is my code:

<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%;
}

FluffyKitten · Answer 1 · 2020-09-17T07:12:38.960

The reason it's happening is because the total height is actually getting calculated as 100% + the height of the tab element.

You can use flexbox to overcome this quite easily. You can make the container a flex container, and give it the 100% height. Then you use the flex property on it's children to determine whether they will stretch to use the space.

I've used the ngb-tabset element in your code as the container, and added the following CSS to make it take up 100% of the space and display the nav-tabs and tab-content in a column inside it:

ngb-tabset {
  display: flex;
  flex-direction: column;  /* show the child elements in a column */
  height: 100%;            /* Use the full available height */
}

Then we add the following to tell the tab-content to stretch to the full available height after the nav-tabs, and to stop the nav-tabs from stretching:

ngb-tabset .nav-tabs {
  flex: 0; /* do not grow or shrink */
}
ngb-tabset .tab-content {
  flex: 1; /* grow or shrink to fill the remaining space */
}

(Note that I only needed to add the CSS for the container to your live code so some other CSS might be having the same effect, but you would usually need the other CSS also.)

Working Example: (I've added 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; /* do not grow or shrink */
}

#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>

Make the content of a tab occupy 100% of the available space and avoid a vertical scrollbar

1 Answers1