Obtaining the height of a div's parent element while utilizing the d-flex class in Bootstrap

I'm having trouble getting the navigation menu to be the full height of the bordered div and I can't seem to pinpoint where the problem lies.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6a68">'[email protected]'</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class=" mt-5 border rounded h-100">
  <div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start h-100">
    <div class="flex-column px-2" style="">
      <ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="logout.php">Logout</a>
        </li>

        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
  <div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3fde0afa8b9acff">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

htmlcssbootstrap-5

Answer №1

Kindly review the code snippet below. It should work for you. Remove the height (h-100) from navbar-dark and make sure to add d-flex to the parent element.

For further reference, please visit: https://jsfiddle.net/yudizsolutions/1j87zkqb/

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f011f011c5354455003">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="d-flex  mt-5 border rounded h-100">
  <div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start">
    <div class=" flex-column px-2" style="">
      <ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="logout.php">Logout</a>
        </li>

        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
  <div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur non nunc in tellus vehicula volutpat molestie malesuada
    ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d332d332e6166776231">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

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

How can you set the dimensions of rows and columns in an HTML table?

I am currently working on setting specific sizes for each data cell in a table. While most cells are supposed to be the same size, I am encountering an issue where cells marked as d, h, l, and p are smaller than the rest even though I have specified their ...

htmlhtml-tablecell

What is the best way to reference a div link from a different PHP file?

Struggling to access a page div from another php file, I've tried calling it using (found online) admin.php#changepass Here's an example of my HTML code: <div id="changepass" class="w3-container city" style="display:none"> <form name ...

javascriptphpjqueryhtmlcss

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Is there a way to adjust both the width and height of the <v-text-field>tag? I attempted to modify it using .css, but it seems to only affect certain parameters, leaving large white spaces on my page. This is the method I have tried so far: <te ...

cssvue.jsvuejs2vue-componentvuetify.js

Creating a Stylish Funnel Graph using CSS

I am currently working on customizing a funnel chart based on data from my database that is displayed on the page. Everything is functioning correctly except for the CSS rendering of the chart. <ul id="funnel-cht"> <li style="height:70px;widt ...

htmlcsscharts

Prevent the row height from fluctuating following the fadeOut() effect

Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...

jqueryhtmlcss

Alignment issues with menus

Could someone help me with aligning my register and login buttons to the right? I will provide any necessary information upon request. Please note that this is just a small part of a larger menu with additional CSS styling. PHP/ HTML: <a href="<?ph ...

phphtmlcssalignmentright-align

Issues with implementing Bootstrap collapse feature in Angular 9

Could use some assistance with my navbar as it's not opening the menu when screen size is changed. Current dependencies versions: "@angular/animations": "~9.0.6", "@angular/common": "~9.0.6", "@ang ...

angularbootstrap-5

CSS media queries fail to accurately detect the screen size of the device

I am currently developing a mobile web application and have implemented a media query to specifically target phones with a screen height lower than that of the iPhone X+ (812px): @media (max-height: 811px) { } While this media query works flawlessly on ...

androidioscssionic-frameworkmobile

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

jquerycssmenu

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

javascriptphphtml

Prevent the click event on an Angular component

I am currently utilizing the component found on this link: I have not been able to locate a function or property that disables the component state, making it impossible to select dates on the calendar. Due to this limitation, I am interested in learning ...

javascripthtmlangulartypescriptdom

Display a PDF file within an IFrame using JavaScript and then print it

Why is it so challenging to achieve? I've dedicated 48 hours to research this, yet it seems impossible! Although recent Chrome versions allow the parent window to access PDFs in iframes, both FF and IE prevent any interaction with the iframe that dis ...

javascripthtmlcsspdfiframe

Trouble with CSS display in Internet Explorer 8

My website located at this link is working perfectly in IE 10 and IE 11, however, any version lower than that is causing the content to be displayed on the far left of the screen instead of centering it. I have tried tweaking the CSS but can't seem to ...

cssinternet-explorer-8

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

Ways to limit the width of content

While I could use a div container to solve this issue, I'm exploring the possibility of achieving it without one. My goal is to create a layout that is flexible between 640px and 1280px, but remains fixed beyond that range. The colored div I have cur ...

htmlcss

Having difficulty aligning the button in the center

I encountered an issue trying to center a button, I attempted to use text-align: center, but it didn't have the desired effect. .regis-btn { border-radius: 0px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o ...

htmlcss

Font appearance varies between Chrome and Firefox browsers

I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome. In Firefox, the last button in the menu lin ...

htmlcssgoogle-chromefirefoxfonts

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...

javascripthtmlcss

No matter what, the Django authenticate function will consistently return None

I have been facing challenges in implementing registration/login/logout functionality. While user registration is successful and the user data appears in Django admin as well as in the database, I am encountering issues with the login functionality. Upon c ...

htmldjangopython-3.xdjango-formsdjango-views

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson