相同高度不同的div [重复]答案

【问题标题】：Same height different divs [duplicate]相同高度不同的div [重复]
【发布时间】：2021-04-30 10:04:58
【问题描述】：

如何获得一个 div 的高度，而第二个 div/aside 将获得第一个 div 的高度。类似的东西：

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

【问题讨论】：

您的元素是否并排放置在三列中？
你不能只将body设置为display:flex而不是使用js
正如@Pete 已经说过的，我强烈建议只使用 CSS 来控制页面的视觉呈现。保留 javascript 以进行交互。诸如“对齐两个 div 的高点”之类的事情和类似的事情只能用 CSS 来完成。你以后会感谢我的:)
另外，这看起来像是以前可能被问过的问题，所以尝试更多地搜索如何使用 CSS 对齐两个 div 的高度。

标签： javascript html css height

【解决方案1】：

如果您尝试拉伸 <aside> 元素以重新创建 3 列布局，则此任务应仅在 CSS 中完成

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>

否则，如果不是这种情况，并且您想继续使用 JS 方法，则必须将脚本元素放在您要访问的元素之后

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

【讨论】：