Expanding div with row class all the way to the bottom using Bootstrap 4

I have implemented Bootstrap tabs on my webpage and I am looking to extend the height of the tab content to fill the remaining space (stretching it to the bottom). The layout includes a header followed by the tabs, with the header having varying heights. Due to this, using 'calc' in CSS for the tab content is not feasible. I'm exploring options to achieve this using height: 100%. Below is the code snippet I have been working on. When I apply h-100, equivalent to CSS height: 100, a scroll bar appears which is undesirable.

Here is the 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>

Answer №1

This question has already been addressed here. The solution involves using flexbox properties like flex-column and flex-grow-1, or the utility classes detailed here.

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row bg-primary">
        <div class="col">
            <p>Content goes here, with a height that adjusts dynamically based on its contents.</p>
            <p>For example, 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>

Check out the live demo:

Note how min-vh-100 can be used on the container without requiring height:100% on html,body.


For more information, see: Bootstrap 4: How to make the row stretch remaining height?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

I have implemented a bootstrap modal, but whenever I trigger a function on the JavaScript side, it automatically closes. I am aiming for the modal to remain open

<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" > <div cl ...

What is the best method for directing to various pages on a GitHub Pages website?

My GitHub Pages site is live at this link. While the splash page loads perfectly, clicking on the circle to transition to the next page, 'landing.html', leads to a 404 error. I have exhausted all possible solutions to address this issue, includin ...

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...

Utilizing the Jquery hover feature to reveal or conceal an element

My Hover function is designed to display and hide sub menus when a person hovers on them. The issue I'm facing is that the menu disappears when I move the mouse down towards it. Can someone help me identify what I am doing wrong here? ...

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

Achieving a transparent background color for a div without affecting the content with CSS

I am attempting to design a div element with a basic background color and some text displayed on it. I would like to lower the opacity of the background color in this div, but every time I try, the opacity of the text also changes. Is there a way to adjust ...

How to use jQuery to target the second or any desired div element with a specific class

I'm having trouble with something seemingly simple Let's say we are looking for a class called .contentdiv, for example. I am trying to target the second or nth occurrence of the .contentdiv class in a document and retrieve the HTML of that spe ...

Unable to access the button with Selenium clicking functionality

<button class="css-obkt16-button" type="button"><span class="css-1mhnkuh">Download CSV</span></button> I'm attempting to select the highlighted 'Download CSV' button https://i.sstatic.net/SThoW.png with the HTML code ...

Is there a way to modify HTML using a C# program in a web browser?

I’m considering the possibility of editing the HTML document text through the web browser. I am currently working on an email client that utilizes an HTML template for its design. Everything seems to be in order, but now I need to customize the template ...

Determine the outcome with a PHP conditional statement for either "

I'm currently working on adding a function to a script where the user is prompted for a code, which I have successfully added. However, I am facing an issue in determining when to ask the user for the code and when not to. So, I believe I need to use ...

Tips for eliminating the horizontal scrollbar in flexbox that is visible on Firefox and Internet Explorer

I've been working on a website and encountered an issue with horizontal overflow on Firefox and IE in the last section that contains 3 images, while Chrome seems to display it correctly without any overflow. I used a flexbox for the article area, assu ...

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

Require that double-width unicode symbols are displayed as double-width in Markdown or CSS

I am seeking a solution to manage the visual width of double-width unicode characters like the LARGE ORANGE SQUARE ...

Investigating Jquery Flip Card Issues

Looking to create a set of flip cards using HTML, CSS, and jQuery. Currently facing an issue where only the first card is flipping when clicked. Any suggestions on how to modify the jQuery code to make it work for all cards would be highly appreciated. C ...

Adjust the text within the paragraph dynamically according to the option chosen in the drop-down menu using

I'm having trouble updating a paragraph in a letter based on the user's selection from a dropdown menu. I can't seem to figure it out. I don't know whether ng-show/hide or ng-options is the best approach for this. I feel completely los ...

Using script tags incorrectly (JavaScript platform game)

Currently, I am working on the 'create a platform game' project as outlined in Eloquent JavaScript, and I have encountered an issue related to script tags. As per the instructions in the book, we are advised to showcase our level using: <lin ...

Is JSX Babel being rejected for execution?

I have recently started learning React and encountered an error while trying to run this page: Refused to execute script from 'https://unpkg.com/browse/[email protected]/babel.min.js' because its MIME type ('text/html') is not exec ...