Javascript 如何动态地使两列的高度相同

我有一页有两栏。我想文本区域高度模拟左栏高度。加载网页时，左列较短，但当用户开始扩展各种属性（复选框+下拉菜单）时，它会根据隐藏的div增长。但我的文本区域在右栏中仍然很小，将其静态地放大看起来并不好。 我希望它每左栏的高度增加一倍。我不知道如何实现这一目标

编辑： 一次<代码>高度：100%被添加到textarea，它解决了列增长的问题。 但我遇到了另外两个问题

右列中的Textarea与页面加载时的该列重叠。当我尝试调整大小时，它突然正确地跳转到列。奇怪的行为。

左列上下文与右列上下文未正确对齐。我将如何对齐或调整两列的上下文，使它们最终如下所示：

我的CSS：

body {
    height: 100%;
    position: relative;
    background: #000000;
    color: #66adff;
    font-size: 105%;
    font-family: serif, Arial, Helvetica
}

.column {
    border: 5px solid #333;
  }
.container{
    display: flex; 
}

.columnleft {
    width: 45%;
    padding: 10px;
    display: table-cell;
  }
  
.columnright {
    width: 45%;
    padding: 10px; 
    display: table-cell;
}
  
textarea.out {width: 100%; height: 100%; box-sizing: border-box;}

编辑2： 第1期-我在栏中有文字，将区域向下推 问题2-所有问题都用适当的填充进行了修复

---

谢谢大家的回复。

我想你不用js也可以做到这一点，但可以使用CSS网格

例如：

.grid容器{
显示：网格；
网格模板列：1fr 1fr；//每列的宽度
网格模板行：auto；//行高度将根据内容自动调整
}

…一些动态内容
越来越大越来越大
可能是空的、小的或大的

因为您使用的是flex，所以右栏应该会自动调整以匹配左栏。听起来您的问题是textarea没有自动扩展以匹配其容器（右列）

如果是这种情况，请尝试此简单修复-在CSS中，将textarea height设置为100%以自动填充其父级：

textarea {
   height: 100%;
};

下面是一个示例答案：

---

您的代码不起作用的原因是您没有将高度设置为

文本区域

将

高度设置为
100%
将始终使其适合其容器的最大尺寸（
），我还添加了
框大小：边框框
以便您可以在
列右侧添加填充

关于
盒子大小的更好解释可以在这里找到（只是这里不解释，因为我无法做得比这更好）：


函数f_anyEvent（）{
var leftcolumnHeight=document.getElementById（'columnleft'）.style.height.value；
if（document.getElementById（'columnleft'）.style.height！=document.getElementById（'columnright'）.style.height）
document.getElementById（'columnright'）。style.height=leftcolumnHeight.value；
} 
document.getElementById（'add'）.addEventListener（'click'，function（）{
让columnleft=document.getElementById（'columnleft'）；
columnleft.innerHTML+='a'；
});
.row{
显示器：flex；
}
.栏目{
边框：1px实心#333；
}
.左{
浮动：左；
宽度：45%；
填充：10px；
显示：表格单元格；
}
.对{
浮动：左；
宽度：45%；
填充：10px；
显示：表格单元格；
}
文本区{
宽度：100%；
身高：100%；
框大小：边框框；
}

添加
这是一个与您类似的界面的基本演示，它在父容器上使用
显示：网格
，自动保持两个内部div的高度相同。（单击蓝色详细信息元素以触发高度更改。）

它非常简单。（感谢你激励我最终学会如何工作。）


//动态样式不需要JavaScript。（它只是复制文本。）
常数
左=document.getElementById（“左”），
右=document.getElementById（“右”）；
左。addEventListener（“更改”，显示输出）；
函数showOutput（事件）{
right.innerHTML=this.querySelector（“#原因”）.value
}
div{最大宽度：400px；边框：1px纯灰；}
详细信息{边距：10px 5px；颜色：#0000DD；文本装饰：下划线；}
/*这就是魔法发生的地方*/
#容器{显示：网格；网格模板列：1fr 1fr；}
#左{填充：10px；}
#右{空白：预换行；}

我喜欢馅饼
在这里输入您的理由
据我所知，如果函数不适合您，那是因为您使用的是document.getElementById（'columnLeft'），但您将columnLeft定义为类而不是id。您可能希望使用document.querySelector（'.columnLeft'）和document.querySelector（'.columnRight'）在页面上获取这些类的第一个实例以更改其样式。或者，如果希望这些类的所有实例都作为数组使用document.querySelectorAll（'.columnLeft'）和document.querySelectorAll（'.columnRight'）。基本上，使用flex的一个主要优点是我们根本不需要这个js代码在一行中有相等的高元素，你能分享更多的HTML代码吗，或者创建一个可复制的例子如果你应用flex，为什么要使用
float
？为什么不使用
css网格
，不用脚本就可以做到这一点呢？你不需要JS。请看这里：您有一个技术错误<代码>50%50%
几乎总是会溢出。只要使用
填充
或
网格间隙
，它就会溢出<代码>50%
表示填充物、边框或网格间隙中不自动计入父宽度的50%。正确的值应为
1fr 1fr
。此外，您不需要添加
网格模板行
，如果您有超过1行，则可能会导致问题。它应该是
网格自动行
。从技术上讲，您不需要添加它，因为它是默认属性和值。谢谢您的注释！我改变了列的大小-很好！我之所以保留这些行，只是因为这是一个示例，如果其中只有两个子元素，那么应该可以使用这些行