What are the methods for adjusting the height of one div in relation to another div?

Question

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height?


       <div style="width: 100%;">
                <div  class="first"> 
                    Left Div 
                </div>
                <div  class="second"> 
                    <h5> hello </h5>
                    <h5> hello </h5>
                    <h5> hello </h5>
                </div>
        </div>

.first{
width: 50%;
float: left;
background: yellow;
}
.second{
margin-left: 50%;
background: grey;
}

javascript html css bootstrap-4

Answer 1

Answer №1

Learn about CSS Flexible Box Layout

.d-flex {
  display: flex;
}
.first, .second {
  flex: 1 1 auto;
}
.first {
  background-color: yellow;
}
.second {
  background-color: grey;
}

<div class="d-flex">
  <div class="first">
    Left Div
  </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 2

Learn about CSS Flexible Box Layout

.d-flex {
  display: flex;
}
.first, .second {
  flex: 1 1 auto;
}
.first {
  background-color: yellow;
}
.second {
  background-color: grey;
}

<div class="d-flex">
  <div class="first">
    Left Div
  </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 3

Answer №2

To achieve the desired layout, make sure to utilize the flex property on your div elements.

.first {
  flex: 1;
  background: yellow;
}

.second {
  flex: 1;
  background: grey;
}

<div style="width: 100%;display:flex;">
  <div class="first">Left Div </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 4

To achieve the desired layout, make sure to utilize the flex property on your div elements.

.first {
  flex: 1;
  background: yellow;
}

.second {
  flex: 1;
  background: grey;
}

<div style="width: 100%;display:flex;">
  <div class="first">Left Div </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 5

Answer №3

If you're looking for a more efficient way to handle this task, consider using JavaScript in a different way. Here's an example:

document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';

An issue with this approach is that it must be implemented each time the screen size changes.

Another solution involves utilizing "flex" instead of "float" like so:

.first {
            width: 50%;
            background: yellow;
        }

        .second {
            width: 50%;
            background: grey;
        }

        .parent {
            display: flex;
        }

<div class="parent" style="width: 100%;">
        <div class="first">
            Left Div
        </div>
        <div class="second">
            <h5> hello </h5>
            <h5> hello </h5>
            <h5> hello </h5>
        </div>
    </div>

You can also opt for using "flex" instead of setting specific widths manually.

Answer 6

If you're looking for a more efficient way to handle this task, consider using JavaScript in a different way. Here's an example:

document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';

An issue with this approach is that it must be implemented each time the screen size changes.

Another solution involves utilizing "flex" instead of "float" like so:

.first {
            width: 50%;
            background: yellow;
        }

        .second {
            width: 50%;
            background: grey;
        }

        .parent {
            display: flex;
        }

<div class="parent" style="width: 100%;">
        <div class="first">
            Left Div
        </div>
        <div class="second">
            <h5> hello </h5>
            <h5> hello </h5>
            <h5> hello </h5>
        </div>
    </div>

You can also opt for using "flex" instead of setting specific widths manually.

What are the methods for adjusting the height of one div in relation to another div?

Answer №1

Answer №2

Answer №3

Similar questions

I am struggling with sending post requests in Node.js

Avoid connecting HTML input elements with both JavaScript and Java models

Include a new variable in a JavaScript email template

Expanding image in card to fit device width using Ionic

Choosing the attribute value using jQuery/CSS

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

Modifying the URL of an image based on screen size with the @media property

Identifying instances where the AJAX success function exceeds a 5-second duration and automatically redirecting

How can you utilize Angular Signals in combination with HostBinding to dynamically update styles?

When a user clicks a button, modify a section of the URL and navigate to

jQuery AJAX is seamlessly handling cross domain requests in Chrome and other browsers, however, it seems to be struggling in IE10 as it is not properly transmitting data. Additionally, in Internet

Having trouble displaying several thumbnails side by side

Is it possible to adjust the font size in Bootstrap 4.6.2 to fit smaller fonts and bring back color to the tabs that were removed in the update?

Pop-up box with hyperlink

Optimizing the speed and load performance of SQLite in Phonegap

Combine multiple key values from an array of objects into a single array

Developing a custom logging middleware with morgan

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

Adding the <a> tag causes Superfish to malfunction