CODEWITHSUNDEEP
javascriptjquerycss
Al-76
Al-76

Reputation: 1868

How can get the height of a div and set another div to be the same height with JQuery/Javascript

I have a bootstrap container with some content center screen. The amount of content in this container may vary. However, I need it to be at least the height of the aside sidebar.

The aside sidebar, with a fixed width, is positioned absolute (Out of the flow of the document) as setting it to position relative caused the container to end up half way down the screen, after the sidebar.

I tried JQuery/Javascript methods to get the height of the aside sidebar onload and set the section tag or container to be of equal height, but this doesn't seem to get the calculation and set the height. 

    /* CSS */
    section {float: left; border: 1px solid blue;}
    .container {margin: auto; width:60%; background: pink}
    aside {position: absolute; top:0;left:0;}


    <!-- HTML -->
    <section>
        <aside id="aside">
            <ul>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
            </ul>
        </aside>
        <div class="container" id="container">
            This container or the wrapping section tag needs to be at least the hight of the aside
        </div>
    </section>

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

Upvotes: 1

Views: 1010

Answers (6)

Abhilash Nayak
Abhilash Nayak

Reputation: 704

Try this in vanilla javascript.

var left = document.getElementById('aside')
var leftHeight = left.clientHeight;
var right = document.getElementById('container');
var rightHeight = right.clientHeight;

console.log(leftHeight, rightHeight)
// Do the style manipulation after the DOM is loaded
window.onload = () => {
  if (leftHeight > rightHeight) {
    right.style.height = leftHeight + "px";
  } else {
    left.style.height = rightHeight + "px";
  }
}
/* CSS */

section {
  float: left;
  border: 1px solid blue;
}

.container {
  margin: auto;
  width: 60%;
  background: pink
}

aside {
  position: absolute;
  top: 0;
  left: 0;
}
<!-- HTML -->
<section>
  <aside id="aside">
    <ul>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
    </ul>
  </aside>
  <div class="container" id="container">
    This container or the wrapping section tag needs to be at least the hight of the aside
  </div>
</section>

Upvotes: 0

Jared Teng
Jared Teng

Reputation: 311

Use window load instead of ready, because of the reason here:jQuery doesn't return proper body height on document load - Their bug or mine?

$(window).load(function() {
     var left=$('#aside').height();
        var right=$('#container').height();
        if(left>right)
        {
            $('#container').height(left);
        }
        else
        {
            $('#aside').height(right);
        }
    })

Useful links:

http://api.jquery.com/height/

Get height of div with no height set in css

You tagged as JQuery, so rather tackle this using JQuery than native JS. Try to use JQuery when you can if you have it.

Upvotes: 0

Mathiasfc
Mathiasfc

Reputation: 1697

A solution using jQuery.

var left = $('#aside').height();
var right = $('#container').height();
if (left > right) {
  $('.container').height(left);
} else {
  $('.aside').height(right);
}
section {
  float: left;
  border: 1px solid blue;
}

.container {
  margin: auto;
  width: 60%;
  background: pink
}

aside {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <aside id="aside">
    <ul>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
      <li>LINK</li>
    </ul>
  </aside>
  <div class="container" id="container">
    This container or the wrapping section tag needs to be at least the hight of the aside
  </div>
</section>

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

You have to use 

var clientHeight = document.getElementById('myDiv').clientHeight;

or

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

And it returns only number while assigning height again just add px with it

$(document).ready(function(){
 var left=document.getElementById('aside').clientHeight;
var right=document.getElementById('container').clientHeight;
console.log(left);
console.log(right);
if(left>right)
{
    document.getElementById('container').style.height=left+"px";
    
}
else
{
    document.getElementById('aside').style.height=right+"px";
}
});
/* CSS */
    section {float: left; border: 1px solid blue;}
    .container {margin: auto; width:60%; background: pink}
    aside {position: absolute; top:0;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
    <section>
        <aside id="aside">
            <ul>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
            </ul>
        </aside>
        <div class="container" id="container">
            This container or the wrapping section tag needs to be at least the hight of the aside
        </div>
    </section>

Upvotes: 2

Makarand Patil
Makarand Patil

Reputation: 1001

Use Jquery as below.

$(document).ready(function() {
    var left=$('#aside').height();
    var right=$('#container').height();
    if(left>right)
    {
        $('#container').height(left);
    }
    else
    {
        $('#aside').height(right);
    }
});
section {float: left; border: 1px solid blue;}
    .container {margin: auto; width:60%; background: pink}
    aside {position: absolute; top:0;left:0;}
input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
        <aside id="aside">
            <ul>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
                <li>LINK</li>
            </ul>
        </aside>
        <div class="container" id="container">
            This container or the wrapping section tag needs to be at least the hight of the aside
        </div>
    </section>

Upvotes: 0

Nidal Salkic
Nidal Salkic

Reputation: 5

When you got the value of height (left and rigth) you got value with 'px'. E.g. left = 250px, right = 300px, and that couldn't be used on if statment with > or <.

Solution is that you need first the remove px from value than check which of them is larger, and after that you need add px on value, i set on container.

Upvotes: 0

Related Questions