How to Set Height of Element to Match Height of Another Element

section {
  display: flex;
  gap: 16px;
  position:relative; /* position relative means contained items are relative to this */
}

form {
  background-color: cadetblue;
  
}

ul {
  position:absolute; /* position absolute means the size of this block doesn't affect the height of the container */

  max-height:100%; /* 100% of the containing section, which has position:relative */
  margin: 0px;
  background-color: chocolate;
  overflow: auto;
}

<section>
      <form>
        <h1>Form</h1>
        <button>Submit</button>
      </form>
      <div>
      <ul>
        <li>Adobe</li>
        <li>Amazon</li>
        <li>Apple</li>
        <li>Facebook</li>
        <li>Google</li>
        <li>Microsoft</li>
        <li>Netflix</li>
      </ul>
      </div>
    </section>

Set height of div = to height of another div through .css

I am assuming that you have used height attribute at both so i am comparing it with a height
left do it with JavaScript.

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Another idea can be found here
HTML/CSS: Making two floating divs the same height.

How to set height of element to match height of another element? in android

There are several ways to achieve the desired behavior.

The first one, that requires zero Java/Kotlin code is to use ConstraintLayout as the parent Layout. Just put top/bottom constraints of view2 to match the top/bottom of view1. Keep in mind, this would work only in one case: If your views are horizontally aligned. And to change the visibility of two views simultaneously in that case you would probably have to use Groups

Use this code snipped for a reference:

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="[your_constraint]"
        app:layout_constraintEnd_toEndOf="[your_constraint]"
        app:layout_constraintTop_toTopOf="[your_constraint]"
        app:layout_constraintBottom_toBottomOf="[your_constraint]"/>

    <View
        android:id="@+id/view_2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="[your_constraint]"
        app:layout_constraintEnd_toEndOf="[your_constraint]"
        app:layout_constraintTop_toTopOf="@id/view_1"
        app:layout_constraintBottom_toBottomOf="@id/view_1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The second one is to use View.OnLayoutChangeListener from the code. Set it to the first view and programmatically change the height of the second view based on the height of the first one.

Like that in Kotlin:

view1.addOnLayoutChangeListener { _, _, top, _, bottom, _, _, _, _ ->
    view2.layoutParams.height = bottom - top
    view2.requestLayout()
}

How to set height of a div element to same as another div

HTML

 <div class="container">  
     <div class="Div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
     Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
     </div>  
 </div>  

CSS

.Div1, .Div2 {  
    float: none;  
    padding: 20px;  
    vertical-align: top;  
}  
.container {  
    display: table;  
}  
.Div1 {  
    width: 400px;  
    background-color: LightSlateGrey;  
    display: table-cell;  
}  
.Div2 {  
    width: 200px;  
    display: table-cell;  
    background-color: tan;  
}  

Check out this : Fiddle

Both the divs will take same height irrespective of its content length.

Set element height from another element in Angular2

This is my solution to this problem, i made a function that is called in Oninit and every button that updates the content and on html i called it [style.height.px]="elHeight - 100"

This is my Typescript code

  getHeight() {
        const leftEl = document.getElementById('number-col');
        const rightEl = document.getElementById('question-col');

        setTimeout(() => {
          this.elHeight = rightEl.clientHeight;
        }, 100);

      }

CSS way to adjust a div's height based on another div

The desired result can be achieved with flexbox.

Firstly, it is a good idea to eliminate <br/>s from the code. You can place these items in <div>s instead.

...
<div>1content</div>
<div>2content</div>
<div>3content</div>
...

On the container, you can use flexbox to tell it to behave as a column:

#container {
  display: flex;
  flex-flow: column wrap;
}

This will similarly be required for the children, because the layout of contents of flexible, popup, and footer are columns.

Now the most important part. The flexbile div should take up the available space, while the div underneath it should not. Therefore, we can apply the following:

#flexible {
  display: flex;
  flex: 1 0 auto;
}

#popup {
  display: flex;
  flex: 0 1 auto;
}

This tells flexible to use available space, and popup not to. For more information on how the flex selector works, see https://developer.mozilla.org/en/docs/Web/CSS/flex

JS Fiddle example

Set a DIV height equal with of another DIV height

Try to use innerHeight, to obtain the height of .prev.

---

Related Topics