Set Height of <Div> = to Height of Another <Div> Through .Css

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.

adjust a div's height based on another div by CSS

as I told above, I wanted sidebar to be scrolled when the sidebar is longer than content. so I solved it by pure CSS:

my new HTML code:

<section class="container">
    <div class="sidebar">
        <div class="sidebardiv">
            <ul>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
</section>

my new CSS code:

.container {
    display: flex;
}
.sidebar , .content {
    flex: 1 0 auto;
}
.sidebardiv {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow: auto;
    padding: 0 8px 0 8px;
}

Set a DIV height equal with of another DIV height

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

Setting div height to another div's height

I have prepared for you a simple example of assigning parent height to a child. An example in vanilla js.

let parent_div = document.querySelector('.parent');
let child_div = document.querySelector('.child');
let click_button = document.querySelector('input');

click_button.onclick = function(){
  child_div.style.height = parent_div.offsetHeight + 'px';
};

.parent {
  width: 100%;
  height: 300px;
  background-color: yellow;
}

.child {
  width: 50%;
  background-color: green;
}

<input type="button" value="click me to get the height of the child div">
<div class="parent">
 <div class="child">
 </div>
</div>

Setting the height of a div based on the height of another div

I think you want the whole thing to stay one static size i.e the size of who ever is viewing its window. SO basically you must change all the divs to be a certain percentage height what ever you want.

For this example I used 26% for the top, 48% for the middle, and 26% for the footer.
I used jquery to center the overlay horizontally(i admit it is a bit hackey but it is basically setting a margin top to 25% of the page on both when the page initially loads and when you resize it... you will need to adjust the percentages to however big you want the top bar to look)

here is the css, I kept the html the same apart from adding the jquery script tags

#main {

width: auto;
background-color: #FF6;
margin-top: 0;   
}

#main .horsebanner {
width: auto;
height: 26%;
background-color: blue;
margin-top: 0;  
}

#main .midbackground {  
width: auto;
height: 48%;
background-color: #CCC;
margin-top: 0;
}

#main .footer { 
width: auto;
height: 26%;
background-color: red;
margin-top: 0;
}
.overlay {
width: 50%;
height: 50%;
margin-left: 25%;
background-color:#0F0;
position: absolute;
}

and this is what the jquery looks like so that everything stays the same when you change window size etc..

$(document).ready(function(){
                  $('#main').height($(this).height());
                  $('.overlay').css('margin-top',$('body').height()/4);
                  });

$(window).resize(function(){
$('#main').height($(this).height());

    $('.overlay').css('margin-top',$('body').height()/4);

});

and of course the jsfiddle http://jsfiddle.net/pc8Rs/3/

How to automatically increase height of a div, as the height of another div increases?

You can use JavaScript to get an element height and then use this value to set other element height, as you can see here using jQuery:

var height = $(".div1").height();

And, if your first div height changes with the window resize or something like this, you can use an EventListener to call the function that will modify the .div2 based in the first div's height:

window.addEventListener('resize', function(event){
    $(".div2").css({"height":height});
});

You can even apply a CSS transition to the height property to animate the height change.

JSFiddle Demo

Set min-height of div to the height of another div

Try jQuery's outerHeight() function to get the "current computed height" of your slider, and execute it on load and on resize events:

function resizeMenu(){
    $("#menu-main-menu > li.menu-parent-item > ul.sub-menu").css("min-height",
        $("#new-royalslider-1").outerHeight()
    );
}

// Do this on load and on resize
$(window).load(resizeMenu).resize(resizeMenu);

JS Fiddle Demo

Edit: If you want to substract 40px to the height, you can just do ....outerHeight()-40. Js Fiddle Demo

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

It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.

Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

---

Edit:

Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:

CSS - Equal Height Columns?

How to make one div's height depended of another div's height?

To expand on my comment, you can't do it semantically. You have to use a little trick to fake the 100% height. It's called faux columns, and you can read more here.

In your case, we can fake it by adding a few background divs:

<div class="background bg1"></div>
<div class="background bg2"></div>

Then changing your CSS like so:

#wrapper {
    border: 1px solid black;
    position: relative;
}

#wrapper:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}

.block {
    position: relative;
    float: left;
    vertical-align: top;
    width: 200px;
    text-align: left;
    min-height: 200px;
    padding-left: 20px;
    z-index: 2;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 1;
}

.bg1 {
    background-color: #eee;
}

.bg2 {
    left: 200px;
    background-color: #aaa;
}​

Here's a working jsFiddle.

---

Related Topics