Extend the height of bootstrap 5.2.0 row/column to reach the bottom of the page

I'm having difficulty extending the left navigation section to reach the bottom of the page while remaining responsive. Despite trying various solutions like h-100, flex-grow, min-vh-100m self-align: stretch, nothing seems to solve the issue.

Check out my Codepen for reference (You may need to increase the height of the output window):

https://codepen.io/ma66ot/pen/KKQZXew

HTML

    <div class="col-md-3 col-lg-2">
      <div class="logo">
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/300px-Circle_-_black_simple.svg.png" id="circle" alt="">
        </div>
      </div>
        <div class="row">
          <div class="col-md-12">
            <div class="navigation ">
              <div class="title-nav">
                <img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
              </div>
                
                <div class="button-container">
                  <ul>
                    <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Overview</button></a></li>
                    <li><a href="trainers"><button type="button" class="btn btn-primary btn-lg btn-block">Trainers</button></a></li>
                    <li><a href="participants"><button type="button" class="btn btn-primary btn-lg btn-block">Participants</button></a></li>
                    <li><a href="groups"><button type="button" class="btn btn-primary btn-lg btn-block">Groups</button></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-9 col-lg-10">
          <div class="main-window">
        </div>
      </div>    
    </div>
  </div>
</div>    

CSS

h2 {
  width:100%;
}

html button {
  border: 0;
  width: 100%;
}


html ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

html .container-fluid {
      padding: 1em;
    }

#circle{
  width: 100%;
  height: 100%;
}

#verwaltung-logo {
  width: 50%;
  height: 50%;
}
html .links {
  padding-right: 3em;
}

/* Navigation */
html .navigation {
  background: #FFA500;
  border-radius: 48px;
  padding: 1em;
  margin-top: 1em;
}

li {
   margin-top: 1em;
   margin-bottom: 1em;
}

.button-container{
  width: 80%;
  margin: auto;
}
.navigation a {
  color: white;
  text-decoration: none;
}

.main-window {
  background: #FF6E13;
  border-radius: 48px;
  overflow-y: scroll;
  height: calc(100vh - 2em);;
}

/* Hide scrollbar for Chrome */
.main-window::-webkit-scrollbar {
  display: none;
}

.main-window {

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

.main-window button {
  border-radius: 10px !important;
}

Answer №1

Check out this explanation for filling or stretching the remaining height using flexbox column direction and flex grow.

  1. Adjust the left column to viewport height and apply min-vh-100
  2. Ensure the left column is set to d-flex flex-column
  3. Add flex-grow-1 to the div to fill the remaining column height
  4. Apply h-100 to the navigation for full parent height

<div class="container-fluid ">
    <div class="row">
        <div class="col-md-3 col-lg-2 min-vh-100 d-flex flex-column">
            <div class="logo">
                <div>
                    <img ...>
                </div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-md-12">
                    <div class="navigation h-100">
                        <div class="title-nav">
                            <img .. >
                        </div>
                        <div class="button-container">
                            <ul>
                                <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Overview</button></a></li>
                                <li><a href="trainers"><button type="button" class="btn btn-primary btn-lg btn-block">Trainers</button></a></li>
                                <li><a href="participants"><button type="button" class="btn btn-primary btn-lg btn-block">Participants</button></a></li>
                                <li><a href="groups"><button type="button" class="btn btn-primary btn-lg btn-block">Groups</button></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-lg-10">
            <div class="main-window">
            </div>
        </div>
    </div>
</div>

Answer №2

To start, adjust the height of the left logo and then apply a specific height to the .navigation class while accounting for the logo's height. Take a look at the example below:

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

In this scenario, the height of your logo div is 200px.

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

Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field? Check out this example The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing ...

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

Inject the variable into location.href

I am dealing with a dynamic URL, and I want to achieve the following in my HTML: <a onclick="location.href='myVariable';"><span>Click here</span></a> The issue is that this approach displays the actual string 'myVar ...

Troubleshooting varying <li> heights in Google Chrome with CSS

Kindly review the image enclosed below ul li{ width:100px; height:200px; float:left; border:10px double #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; } <ul> <li><a href="image.jpg"><img src ...

What is the best way to fill out border boxes in Bootstrap 4 for horizontal text alignment?

I'm struggling with this code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row border border-success"> <div class="cols-12 col-sm-6 col-lg-4" class="b ...

Tips for organizing nested form rows with Bootstrap 4

I am currently working on a nested form row and I am looking to align the form fields vertically. The current output I am getting is shown below: https://i.sstatic.net/NEWGY.png Here is the code snippet: <link rel="stylesheet" href="https://maxcdn ...

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

What is the best way to display an HTML array?

I'm currently facing an issue with rendering an array containing both <p> and <div> items as HTML. Despite my attempts to render them properly, the values appear as plain code instead of formatted paragraphs. To illustrate, let's cons ...

What could be causing the lack of access to the prerender.io service in this particular setup?

I am the owner of a Angular application running on an Apache server. To enable prerendering, I added <meta name="fragment" content="!" /> in the <head> section and set $locationProvider.html5Mode(true); In my Apache server's .htaccess fi ...

Breaking the page with HTML and CSS

* { box-sizing: border-box; } .row { display: flex; } /* Creating two equal columns that sit side by side */ .column { flex: 50%; padding: 10px; } div.row { page-break-after: always; } <body> <div<div class="row"> ...

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

Updating HTML label values using jQuery in a loop based on their index position

I am having an issue with my ajax call where I want to loop through each label in a class and set their value to the response returned from the server. However, the current code sets all labels to the same value instead of setting individual values based o ...

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

Is there a jQuery tool that can effortlessly add items to a list element?

I'm currently developing a task management application on the web. I have a textarea where users can input tasks, and when they press enter, it should automatically be added to a list element (li). The adding functionality works, but only after refres ...

Tips for implementing a CSS override for a block element's relative date

I am looking to customize this source code by using a CSS override to ensure that the "lightning-relative-date-time" element is not utilized. I want to keep it displaying the timestamp information by default. Can you guide me on how to achieve this throu ...

Troubleshooting directive not functioning properly with AngularJS ng-click

My HTML img tag is not responding to ng-click when clicked. I'm puzzled by this issue occurring in masonryPictureView.html Main page - home.html <ng-masonry> <ng-picture ng-items="projectdescription.pictures"></ng-picture> </n ...

Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...