Achieving full height on a Bootstrap 4 row

Question

Achieving full height on a Bootstrap 4 row

I'm having difficulty getting a row to expand to occupy the remaining available height. I attempted to add h-100 to the row class, but this resulted in a white space at the bottom of the screen. I know there must be a solution out there, but I just can't seem to figure it out.. Below is the code snippet I'm working with:

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Check out the codepen link for live demonstration and testing: https://codepen.io/ee92/pen/zjpjXW/?editors=1100

Here's an image snapshot for reference: https://i.sstatic.net/yNiBk.png

If anyone has any suggestions on how to make the blue row (ROW 2) take up all the available red space, please let me know!

Thank you in advance

html css grid bootstrap-4 row

Answer 1

Answer №1

Learn about the flex-grow-1 class in Bootstrap 4.1 to adjust...

Check out this code example on Codeply

html,body{height:100%;}

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Update 4.3.1: Another instance utilizing the vh-100 utility class

Visit this link for more examples on Codeply

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center min-vh-100">
    <div class="col-4 bg-red">
      <div class="d-flex flex-column h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Find more information here: How to make the row stretch remaining height

Answer 2

Learn about the flex-grow-1 class in Bootstrap 4.1 to adjust...

Check out this code example on Codeply

html,body{height:100%;}

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Update 4.3.1: Another instance utilizing the vh-100 utility class

Visit this link for more examples on Codeply

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center min-vh-100">
    <div class="col-4 bg-red">
      <div class="d-flex flex-column h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Find more information here: How to make the row stretch remaining height

Answer 3

Answer №2

This code provides a solution for creating a flexible div. To achieve this, the wrapper div should have the classes h-100 and flex-grow-1 with overflow-auto. This will allow the div to expand to fill the available space when the content is smaller than the space, and display a scrollbar when the content exceeds the space.

Check out the demo on jsfiddle

<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">        
    <div class="text-white p-0" style="height:50px">HEADER</div>
</div>

<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">

        <div>Item1</div>
        <div>Item2</div>
        INNER text 1<br>
        INNER text 2<br>

</div>

<div class="flex-column justify-content-center bg-darkblue px-2">
    <div class="text-white p-0" style="height:50px">FOOTER</div>
</div>

Answer 4

This code provides a solution for creating a flexible div. To achieve this, the wrapper div should have the classes h-100 and flex-grow-1 with overflow-auto. This will allow the div to expand to fill the available space when the content is smaller than the space, and display a scrollbar when the content exceeds the space.

Check out the demo on jsfiddle

<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">        
    <div class="text-white p-0" style="height:50px">HEADER</div>
</div>

<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">

        <div>Item1</div>
        <div>Item2</div>
        INNER text 1<br>
        INNER text 2<br>

</div>

<div class="flex-column justify-content-center bg-darkblue px-2">
    <div class="text-white p-0" style="height:50px">FOOTER</div>
</div>

Answer 5

Answer №3

For those who are struggling to make this work, here is a simple and effective solution that should solve the problem in most cases. Just include the following class in the div you want to adjust the height for: Keep in mind that 100vh represents 100% of the visible height and 200px is the combined fixed height of any divs above.

.fillRemaining {
height: calc(100vh - 200px);
}

Answer 6

For those who are struggling to make this work, here is a simple and effective solution that should solve the problem in most cases. Just include the following class in the div you want to adjust the height for: Keep in mind that 100vh represents 100% of the visible height and 200px is the combined fixed height of any divs above.

.fillRemaining {
height: calc(100vh - 200px);
}

Achieving full height on a Bootstrap 4 row

Answer №1

Answer №2

Answer №3

Similar questions

I'm currently working on a course assignment and I've encountered an issue where nothing happens when I try to execute node

The object with the tag HTMLAnchorElement is unable to access the 'attr' method

Retrieving an image from an input file and setting it as the background of a div element

Transform JSON data into an HTML layout

Building a dynamic tab menu using JavaScript: A step-by-step guide

Concealing a message within a section that has been minimized to a width of 0

Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

What is the best way to load content into Bootstrap tabs?

What is the best way to insert a YouTube video into a WordPress template page?

Having trouble getting the AJAX script to change the background in Internet Explorer?

How to apply background images to LI elements using CSS

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

Is there a way to automatically redirect my login page back to the original page in case of login failure?

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

Looking to display the view source of an HTML page, but it keeps redirecting to another site when I try. Anyone know how to diagnose and fix this issue?

Complete a checkbox entry form and showcase it within a "division" on the current page

Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

Integrating additional youngsters into the HTML DOM using Angular.js

Show a PDF document on the webpage by making an ajax request in a C# MVC application