Make the div's height 100% of its container with dynamic values

After extensive research, I have yet to come across a solution to this issue.

Within a container div, I have multiple floated divs with dynamically generated content that can range from just a few words to an entire page. This setup essentially forms a row of a table, although I prefer not to use a table layout for certain reasons.

I managed to make the container expand to accommodate the larger content by using overflow:hidden;

Now my goal is to have all the divs adjust their height according to the container's height.

csshtml

Answer №1

One way to uniform the height of all div elements inside a container is by applying a class to each div, such as class="contained".

Next, you can implement a JavaScript function that executes when the document is generated. This function will determine the maximum height among all the contained divs and then set this height for all other divs.


$(function() {
    var maxHeight = 0;
    $(".contained").each(function() {
        if (maxHeight < $(this).height()) {
            maxHeight = $(this).height();
        }
    });
    
    $(".contained").each(function() {
        $(this).height(maxHeight);
    });
});

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

Using a checkbox to collapse paragraphs in Bootstrap 4

There seems to be an issue with Bootstrap4 in the code below .form-group .custom-control{ margin-left: 15px; } <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.clo ...

htmlbootstrap-4

Prevent select box from expanding when a lengthy option is selected

Currently, I am dealing with a dashboard that consists of multiple panels. Due to the abundance of information on the dashboard, each panel has a restricted width. Within these panels, there is a table displaying certain users along with an Angular dropdo ...

htmlcssangularjs

Switch the hover effect to be activated by clicking

Recently, I discovered an incredible plugin created by the talented developer janko. It has been a fantastic addition to my project. The only issue I've encountered is that I do not want the default hover style. Is there a way to transform it into a ...

jqueryhtmlcsshoverdock

Comparing the impact of mixins styles versus additional style rules

I have customized mixins for a red button. For example: .btnRed{ background:red; color:white; border-radius:3px; min-width:200px; font-size:18px; } I typically use this to style my main buttons, but for one specific button, I n ...

csslessmixins

Animating components in React: A step-by-step guide to smoothly transition between rendered components

I am implementing a feature where a component changes at regular time intervals. Is there a way to incorporate an animation each time this change occurs? What would be the most effective approach? constructor (props) { super(props) this.state = { ...

javascriptcssreactjsanimation

issues floating

I'm facing some unusual issues while trying to float elements to the left. Even after attempting to clear it with the easy clearing method, I still can't seem to get it right. Can you spot any mistakes? My goal is to float the article element. H ...

htmlcsscss-float

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

As I delved into the basics, incorporating canvas, CSS, and JavaScript, a question arose: should the image be housed in the HTML or the JavaScript code? Following this, I added a background color to the canvas and defined properties of the canvas in JavaSc ...

javascriptcsshtmlhtml5-canvas

The highlighted current date is not being displayed in the Bootstrap datepicker pop-up

I am currently using Bootstrap datepicker through the Bootstrap-datepicker API. However, when I click the button to open the calendar/datepicker pop-up, it does not highlight the current date in blue font, as demonstrated in the API examples. This is the ...

javascriptjquerycsstwitter-bootstrapdatepicker

Update the appearance by utilizing ngModelChange

Is it possible to style an element using ngModelChange? I attempted the following method, but it was unsuccessful <input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color ...

htmlcssangulartypescript

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

javascripthtmlangularjsfunctiondry

What is the best way to resize my images without distorting their appearance?

I am currently facing an issue with utilizing images in my project. I aim for them to resemble the first two pictures. However, when I attempt to adjust the image height using CSS, the result ends up looking unappealing. Is there a method for the images to ...

htmlcss

Make sure the footer stays at the bottom of the page when the page height is short

I need to place a footer on my webpage in a specific way: It should be at the bottom of the page, even if the content in the main-container is short. In this case, a large vertical margin needs to be added that calculates as height(viewport) - height(m ...

htmlcssfooter

Is it possible to dynamically refresh a Void and PlaceHolder without requiring a full page reload?

Is there a way to automatically update a Void/PlaceHolder using SQL queries without refreshing the entire ASP page? I attempted to use an ASP timer without success. SOLUTION: After experimenting with asp:updatapanel, I discovered a solution that worked ...

c#htmlasp.net.netvoid

Update a portion of the list items

Here is the HTML code I am working with: <ul id="info"> <li> <span>Name:</span>Charis Spiropoulos </li> ... I need to change the content of the <li> element that is not within the span. How can I do this? Cur ...

javascriptjqueryhtmllist

Steps for Including a Required AMP HTML Attribute in an HTML Tag

Currently working on my website with Gatsby and would like to classify it as an AMP website. What's the best way to include the required AMP attribute in the <html> tag? ...

javascripthtmlgatsbyamp-htmlreact-helmet

The width property in HTML's select element is failing to be set at 100% reach

<div class="tabbable"> <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs hidden-sm hidden-md hidden-lg"> <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Information Services</a></li ...

javascriptjqueryhtmlcss

How to deselect a checkbox in next.js when another one is selected

I'm looking to create a navigation system where clicking on a button scrolls to a specific section. However, I'm wondering how to deselect three inputs when one is selected in next.js using the code below. Do I need to modify each menu item indiv ...

javascripthtmlcssreactjsnext.js

What steps do I need to take in order to make fullscreen slides?

Seeking assistance in developing full-screen slides similar to those found on the following website... The browser scrollbar should be hidden, and the slides should automatically transition when scrolling up/down or using the up/down arrow keys, with the a ...

javascriptjqueryhtmlcssweb

Embedding JavaScript within an HTML document

Need help with linking HTML files and utilizing JavaScript outputs? I have an .html file displaying a webpage with tabs that I want to link to another .html file. How can I create a link on my page to navigate to the other file? Additionally, in the linked ...

javascripthtml

Update the division by clicking the button with a randomly generated JavaScript string element

Trying to solve a unique problem here as none of the proposed solutions on similar questions have worked for me. Apologies if I'm missing something, I'm new at this. The issue is with loading an empty div on my page using javascript and strings ...

javascriptjqueryhtmlajax