Creating a consistent height for a static div to match a fluctuating dynamic div

Question

Creating a consistent height for a static div to match a fluctuating dynamic div

Let's discuss a challenge I'm facing with div elements:

<div class="middle"></div>

On a daily basis, this particular div is populated with API data causing its height to vary.

In addition, there are these two other divs in the mix:

<div id="right" class="sideScoreDiv"></div>
<div id="left" class="sideScoreDiv"></div>

My goal is to have these side divs match the same height as the middle div. So far, setting the heights to 100% hasn't yielded results and neither has attempting overflow hiding. The challenge intensifies with dynamically generated divs involved in the mix.

javascript html css

Answer 1

Answer №1

A clever approach to tackling this issue involves utilizing a grid layout. Take, for instance, the code snippet below where elements are added to the first child of the parent container, causing the height of the second div to adjust accordingly.

<div class="parent-container">
   <div id="left">
      left
   </div>

   <div id="content">
      <!-- populate with content, like a list -->
      <ul></ul>
   </div>

   <div id="right">
      right
   </div>
</div>

<style>
   .parent-container {
      background-color: rebeccapurple;
      display: grid;

      /* adjust columns as needed to customize widths */
      grid-template-columns: 10rem auto 10rem;
   }

   /* styling for better visual appeal */
   #left, #right {
      padding: 1rem;
      background-color: paleturquoise;
   }
</style>


<!-- script to demonstrate dynamic data -->
<script>
   setInterval(() => {
      const parent = document.querySelector('ul');
      const entry = document.createElement('li');
      entry.innerText = 'data';
      parent.appendChild(entry);
   }, 1000);
</script>

Answer 2

A clever approach to tackling this issue involves utilizing a grid layout. Take, for instance, the code snippet below where elements are added to the first child of the parent container, causing the height of the second div to adjust accordingly.

<div class="parent-container">
   <div id="left">
      left
   </div>

   <div id="content">
      <!-- populate with content, like a list -->
      <ul></ul>
   </div>

   <div id="right">
      right
   </div>
</div>

<style>
   .parent-container {
      background-color: rebeccapurple;
      display: grid;

      /* adjust columns as needed to customize widths */
      grid-template-columns: 10rem auto 10rem;
   }

   /* styling for better visual appeal */
   #left, #right {
      padding: 1rem;
      background-color: paleturquoise;
   }
</style>


<!-- script to demonstrate dynamic data -->
<script>
   setInterval(() => {
      const parent = document.querySelector('ul');
      const entry = document.createElement('li');
      entry.innerText = 'data';
      parent.appendChild(entry);
   }, 1000);
</script>

Answer 3

Answer №2

Seems like what you're after is either grid or flex. Check them out!

Answer 4

Seems like what you're after is either grid or flex. Check them out!

Creating a consistent height for a static div to match a fluctuating dynamic div

Answer №1

Answer №2

Similar questions

Verify Session Cookies through JSONP requests

The click event for dynamic content in jQuery is not functioning

Is it possible to utilize the lighten css property within ngStyle in Angular?

Utilizing browser local storage in web development

Updating every occurrence of a string in the visible text of a webpage: A step-by-step guide

Troubleshooting problems with dates in jQuery AJAX

I am looking to dynamically load a script only after retrieving specific data from a JSON file in Next.js

Is it acceptable for require() to run only once during a runtime?

Chrome displays radio buttons with a white background that is not intended. Firefox, on the other hand

How to efficiently insert multiple documents into MongoDB using JavaScript

Issues arise when inline elements are not behaving correctly when placed alongside inline-block elements

ng-repeat table grouping by date

I'm having trouble with my jplayerplaylist remove feature, it's not functioning as expected

Something is not quite right when the page is loading in a Ruby on Rails application

Ensure uniform height for inline-block divs in HTML styling

Center text vertically in a textarea

Issue involving two cards within a radio group

Issue with Bootstrap Image Slider Carousel functionality not functioning as expected

What is the process for implementing dynamic routing within a child component in ReactJS?

Why is it that the reduce function is not returning the object I expected?