0

I'm using the tabs from bootstrap in my page and I want to make the height of the tab content to what is left (to stretch it to the bottom). I have a header and below the header are the tabs. The header in my case can be at a different height. This is the reason why I am not using in CSS for the tab content some features like 'calc'. I would like to solve it somehow with height: 100% if possible. Here is the code what I have tried so far. When I use h-100 which is basically for CSS height:100, the scroll bar appears, which is not what I want.

Here is my code:

html,
body {
  height: 100%;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="row bg-primary">
    <div class="col">
      <p>Here is going to be some content. Height of this content is auto it can change based on what it has inside.</p>
      <p>For instance two paragraphs.</p>
    </div>
  </div>
  <div class="row mt-2 bg-warning h-100">
    <div class="col h-100">
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="tab1-nav" data-toggle="tab" href="#tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Tab 1</a>
        <a class="nav-item nav-link" id="tab2-nav" data-toggle="tab" href="#tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Tab 2</a>
      </div>
      <div class="tab-content h-100 border border-top-0 mb-2 p-2" id="nav-tabContent">
        <div class="tab-pane show active" id="tab1" role="tabpanel" aria-labelledby="nav-tab1">
          <div class="row h-100">
            <div class="col">
              Content 1
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="nav-tab2">
          <div class="row">
            <div class="col">
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
              <h1>Content tab 2</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
jAdex
  • 472
  • 1
  • 5
  • 15

1 Answers1

1

Basically this has been answered before. You would use the flexbox flex-column flex-grow-1 (or flex-fill) utility classes.

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row bg-primary">
        <div class="col">
            <p>Here is going to be some content. Height of this content is auto it can change based on what it has inside.</p>
            <p>For instance two paragraphs.</p>
        </div>
    </div>
    <div class="row mt-2 bg-warning d-flex flex-column flex-grow-1">
        <div class="col h-100 d-flex flex-column">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="tab1-nav" data-toggle="tab" href="#tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Tab 1</a>
                <a class="nav-item nav-link" id="tab2-nav" data-toggle="tab" href="#tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Tab 2</a>
            </div>
            <div class="tab-content flex-grow-1 border border-top-0 mb-2 p-2" id="nav-tabContent">
                <div class="tab-pane h-100 show active" id="tab1" role="tabpanel" aria-labelledby="nav-tab1">
                    <div class="row h-100">
                        <div class="col">
                            Content 1
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="nav-tab2">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/rMXJcFPAoh

Notice how you can use min-vh-100 on the container, without the need for height:100% on html,body.

Also see: Bootstrap 4: How to make the row stretch remaining height?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624