Make sure the height of this div is equal to or greater than the height

Question

Make sure the height of this div is equal to or greater than the height

Even though I have a lot of experience as a programmer, I am relatively new to web development. So the question I have might be too basic for some of you.

I have two divs positioned next to each other, called leftdiv and rightdiv. I want to ensure that my rightdiv is at least as tall as my leftdiv for visual purposes, although it may end up being taller. The size of my leftdiv remains constant, but the size of my rightdiv can change. I don't want to specify a min-height for my rightdiv manually because I will be making frequent changes to my leftdiv. Therefore, I am looking for a script (such as JavaScript) that dynamically sets the min-height of the rightdiv to match the height of the leftdiv.

If you have any suggestions or solutions, please feel free to share them with me.

Thank you in advance!

javascript jquery css html

Answer 1

Answer №1

Give this a shot:

$('#rightdiv').css('min-height', $('#leftdiv').height());

Check out these demos:

http://jsfiddle.net/25dSw/

http://jsfiddle.net/25dSw/1/

Answer 2

Give this a shot:

$('#rightdiv').css('min-height', $('#leftdiv').height());

Check out these demos:

http://jsfiddle.net/25dSw/

http://jsfiddle.net/25dSw/1/

Answer 3

Answer №2

Whenever you make changes to the height of the left container, it's important to also update the minimum height of the right container.

rightDiv.style.minHeight = leftDiv.style.height

If you are modifying the height of the left container, ensure that you adjust the minHeight of the right container accordingly. I have provided a sample setup for your reference.

Using jQuery. DEMO

$(function() {
  var changeLeftHeight, leftDiv, rightDiv;
  leftDiv = $('#leftdiv');
  rightDiv = $('#rightdiv');
  changeLeftHeight = function(callback) {
    leftDiv.css({
      height: Math.random() * 200
    });
    return callback();
  };
  return setInterval(function() {
    return changeLeftHeight(function() {
      return rightDiv.css({
        minHeight: leftDiv.height()
      });
    });
  }, 500);
});

Without using jQuery. DEMO

window.onload = function() {
  var changeLeftHeight, leftDiv, rightDiv;
  leftDiv = document.getElementById('leftdiv');
  rightDiv = document.getElementById('rightdiv');
  changeLeftHeight = function(callback) {
    leftDiv.style.height = Math.random() * 200 + 'px';
    return callback();
  };
  return setInterval(function() {
    return changeLeftHeight(function() {
      return rightDiv.style.minHeight = leftDiv.style.height;
    });
  }, 500);
};

Answer 4

Whenever you make changes to the height of the left container, it's important to also update the minimum height of the right container.

rightDiv.style.minHeight = leftDiv.style.height

If you are modifying the height of the left container, ensure that you adjust the minHeight of the right container accordingly. I have provided a sample setup for your reference.

Using jQuery. DEMO

$(function() {
  var changeLeftHeight, leftDiv, rightDiv;
  leftDiv = $('#leftdiv');
  rightDiv = $('#rightdiv');
  changeLeftHeight = function(callback) {
    leftDiv.css({
      height: Math.random() * 200
    });
    return callback();
  };
  return setInterval(function() {
    return changeLeftHeight(function() {
      return rightDiv.css({
        minHeight: leftDiv.height()
      });
    });
  }, 500);
});

Without using jQuery. DEMO

window.onload = function() {
  var changeLeftHeight, leftDiv, rightDiv;
  leftDiv = document.getElementById('leftdiv');
  rightDiv = document.getElementById('rightdiv');
  changeLeftHeight = function(callback) {
    leftDiv.style.height = Math.random() * 200 + 'px';
    return callback();
  };
  return setInterval(function() {
    return changeLeftHeight(function() {
      return rightDiv.style.minHeight = leftDiv.style.height;
    });
  }, 500);
};

Make sure the height of this div is equal to or greater than the height

Answer №1

Answer №2

Similar questions

The button is not being vertically centered when using the boostrap pull-right class

Implementing a method to pass total value to the <td> tag in angular JS using controller

Adding a PHP file into an HTML page using JavaScript include

Transforming my asynchronous code into a synchronous flow using setTimeout. Should I consider implementing promises?

How can I keep a button element in place when resizing the window using CSS?

Receiving feedback from an Ajax request

Is it possible that my ScriptManager (Ajax) is exerting some influence on the overall outcome of my jQuery script?

Is there a regular expression that can be used to extract sentences from HTML

The image overlay in the div remains fixed in a large screen size but does not stack when the screen size

What is the best way to eliminate a specific element from a JavaScript array?

Retrieve the visitor's IP address following the submission of an AJAX form

Issue with code coverage details not being displayed when running the command "ng test --code

Tips for attaching my navigation bar to the top of the webpage

Enhance your JQuery skills by implementing variables within the .css() function

Having trouble getting PHP Ajax File Upload to function properly?

Display stylized portion of text within JavaScript object

Developing a dynamic modal using Angular and embedding Google Maps within an iframe

Is there a way to eliminate currency within an Angularjs directive?

"Engage with an Angular directive using a button positioned in any location on the

The repairDatabase function cannot be found in the Collection.rawDatabase() method