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

Question

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;
    }

Possible duplicate of [Get full height of element?](https://stackoverflow.com/questions/3410765/get-full-height-of-element) — Tim Gerhard, Nov 03 '17 at 10:28

score 2 · Answer 1 · answered Nov 03 '17 at 10:27

2

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>

answered Nov 03 '17 at 10:27

Sanchit Patiyal

4,910
1
14
31

This works here but not when I copy the code to my example. Im still not getting it to wrap https://screenshots.firefox.com/ceMWwrJjwrvL5wFl/null – Al-76 Nov 03 '17 at 10:45
@Al-76 You must be missing something, it should work. If there is no error in console comment a fiddle of your code or update your question with latest code – Sanchit Patiyal Nov 03 '17 at 10:51
No errors at all in the console. I have tried on codepen as well https://codepen.io/Al-76/pen/bYEzYp – Al-76 Nov 03 '17 at 10:56
It just worked on Codepen so thank you. But still struggling with it in my project. Thank you for helping. – Al-76 Nov 03 '17 at 10:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158156/discussion-between-sanchit-patiyal-and-al-76). – Sanchit Patiyal Nov 03 '17 at 11:05
Sanchit's code works. However, I have a line of CSS in my bigger project that caused a bug. Now that I have removed it all works ace. – Al-76 Nov 03 '17 at 11:41

score 0 · Answer 2 · answered Nov 03 '17 at 10:26

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.

score 0 · Answer 3 · answered Nov 03 '17 at 10:26

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>

score 0 · Answer 4 · answered Nov 03 '17 at 10:27

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>

Jared Teng · Answer 5 · 2017-11-03T10:40:41.030

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.

Abhilash Nayak · Answer 6 · 2017-11-03T11:07:17.190

0

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>

edited Nov 03 '17 at 11:07

answered Nov 03 '17 at 10:30

Abhilash Nayak

664
4
10

You should see other answers before posting yours and check it it is same or not – Sanchit Patiyal Nov 03 '17 at 10:32
1

There were no answers when i opened the question and when i submitted there were 7 answers. People are too fast here. :) – Abhilash Nayak Nov 03 '17 at 10:36
True, but hey! we are here to help :) We find a lots of perfect answers in this site, from the simplest to the most mind boggling problems.. Who knows someone might be facing the exact same problem. – Abhilash Nayak Nov 03 '17 at 10:42
1

Spent 2 hours trying to sort it with various JQuery solutions, CSS, Javascript research still nothing that I can get working. We're not all experts! – Al-76 Nov 03 '17 at 10:48
Did any of the solution work? using .clientHeight and concatenating "px" to height in plain javascript should make it work. – Abhilash Nayak Nov 03 '17 at 10:52

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

6 Answers6