How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakpoint when columns have the class col-12. Can someone help me figure out why this is happening? Why isn't the height set to 100% of the parent div?

Here is a code example with a demo:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mx-0 gy-4">
    <div class="col-12 d-flex col-md-6">
        <div class="card bg-info">
            <div class="card-body h-100 position-relative">
                <div class="row mx-0 h-100">
                    <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px">
                        <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/>
                    </div>
                    <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100">
                        <p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <button class="btn btn-primary w-auto mt-auto">Watch more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <div class="col-12 d-flex col-md-6">
        <div class="card bg-info">
            <div class="card-body h-100 position-relative">
                <div class="row mx-0 h-100">
                    <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px">
                        <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/>
                    </div>
                    <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100">
                        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <button class="btn btn-primary w-auto mt-auto">Watch more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

htmlcssstylesheightbootstrap-5

Answer №1

Since you've implemented flexbox for the row layout, consider utilizing flex-grow: 1 for every card element (remember that in Bootstrap, the class for this is simply flex-grow). Additionally, make sure to define a maximum height for the parent row container.

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

Clear all events from an HTML element and its descendants with TypeScript

Each time the page loads, I have HTML from an API that is constantly changing. Is there a way to strip away all events attached to it? The original HTML looks like this: <div id="content"> <h2 onclick="alert('hi');">Test 1< ...

javascripthtmltypescript

Is the user currently viewing this page?

My website, www.mysite.com, has a basic login system using PHP and MYSQL. With the $_SESSION['user_id'] in place, I am wondering if there is a way to determine if a user currently has the page www.mysite.com/test.php open. Is it possible to acco ...

phpjquerymysqlhtmlajax

Having trouble getting an HTML form with PHP to successfully save data into a MySQL database server

I'm currently working on a code snippet that generates a <textarea> for user input. However, I seem to be encountering an issue where the code only outputs "please include some content", even when there is text in the box. It's supposed to ...

phphtmlmysqlform-submit

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

javascripthtmlcssbootstrap-4

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss

header color scheme and dimensions

Hello, I've managed to get the menu working correctly on my website at www.g-evo.com/header.php. However, I'm now facing an issue with the size of the header. I'd like to shrink the grey area slightly so it aligns better with the logo, while ...

phpcssheader

What is the best way to sort ng-options in an AngularJS select element?

I am encountering a situation where I have the following code snippet: <select ng-model="person" ng-options="person.name for person in mv.people"> However, within the mv.people array, there are certain members that I need to hide. For examp ...

htmlangularjsangularjs-ng-options

Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again. These three boxes have their background set using css background-image. The click event is attached usin ...

jquerycssclickhover

Customize the Header Background Color in React Table

I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...

cssreactjsreact-component

Generating a .png image using the data received from the client [node]

I need to create a highchart client-side and save a PNG of that chart server-side. After successfully generating the highchart and converting it to a PNG using the following function: function saveThumbnail(graph_name, chart) { canvg(document.getEleme ...

javascripthtml

Hovering over text can change the width of the background color

I'm currently facing a roadblock while working on my website. I have successfully adjusted the height of the list items on my navigation bar, but now I am struggling to expand the width so that when hovering over it, the background color covers a slig ...

htmlcss

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

I have been tackling a unique challenge with my custom CMS in Drupal for a couple of weeks now. I am facing an issue where I need to dynamically load a URL by extracting the node ID from the target Drupal page and appending it to the base URL of the websit ...

htmliframejquery

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

Why won't my Java servlet code execute?

included the directory structure To facilitate adding two numbers and displaying the result upon clicking a submit button, I developed a straightforward Java servlet. This servlet retrieves the necessary information when called. The development environmen ...

javascriptjavajqueryhtmlajax

A simple guide on implementing the aria-required attribute into the Material-UI select component

I need some help with implementing the 'aria-required' property on a Material-UI component. Has anyone had success with this before? I haven't tried anything yet since there isn't any information about it in the docs. Thank you in advan ...

htmlreactjsmaterial-uiaccessibility

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

javascriptc#htmlasp.nethtml-table

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

javascripthtml

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

htmlcss