Same height different divs

Question

How can I get one height of one div and the second div/aside will get the height of the first div. Something like that:

<script>
var y = document.getElementById("div1").style.height;
document.getElementById("div_aside1").style.height= y;
document.getElementById("div_aside2").style.height= y;
</script>
<body>
<aside class = "a_left" id="aside1"><div class="a_left" id="div_aside1"><p></p></div>
 </aside>
 <aside class = "a_right" id="aside2"><div class="a_right" id="div_aside2"><p></p></div>
 </aside>
<div class="center" id="div1">
</div>
</body>

can't you just set the body to `display:flex` instead of using js — Pete, Jan 26 '21 at 15:50
As @Pete alreeady said, I would strongly suggest to use only CSS to control the visual presentation of your page. Leave javascript for interactivity. Something like "align the high of two divs" and similar things can be accomplished with CSS only. You'll thank me later :) — Odysseas, Jan 26 '21 at 15:55
Also this looks like a question that has probably been asked before, so try to search some more for how to align the height of two divs using CSS. — Odysseas, Jan 26 '21 at 15:56

score 0 · Answer 1 · answered Jan 26 '21 at 15:53

If you are trying to stretch the <aside> elements to recreate a 3-column layout then this task should be done in CSS only

body {
  display: flex;
  flex-flow: row nowrap;
}

aside {
  flex-basis: 20%;
  border: 1px #9bc solid;
}


#aside2 {
 order: 3;
}
 
/* simulate an height for main element */
main {
  height: 1234px;
  flex: 1;
  margin: 0 5px;
  border: 1px #ccc solid;
}

<body>
<aside class = "a_left" id="aside1">
   <div class="a_left" id="div_aside1">
     
        aside left
    
   </div>
 </aside>
 
 <aside class = "a_right" id="aside2">
   <div class="a_right" id="div_aside2">
    
        aside right
    
   </div>
 </aside>
 
  <main> center </main>
</body>

Otherwise, if this is not the case and you want to go on with the JS approach, the script element has to be placed after the elements you want to access

<script>
var y = document.getElementById("div1").offsetHeight;
document.getElementById("div_aside1").style.height= y + 'px';
document.getElementById("div_aside2").style.height= y + 'px';
</script>

Same height different divs

1 Answers1