如何动态使两列高度相同

Question

我有一个包含两列的页面。我想 textarea 高度模仿左列高度。网页加载时左栏很短，但是当用户开始扩展各种属性（复选框+下拉菜单）时，它会根据隐藏的 div 增长。但是我的 textarea 在右栏中仍然很小，使其静态变大看起来并不好。 我希望它按左列高度增长。不知道如何实现。

编辑： 将height: 100%; 添加到 textarea 后，它就解决了列增长的问题。 但是我又遇到了两个问题。

1. 右列中的文本区域在页面加载时与该列重叠。当我尝试调整大小时，它会突然正确跳转到列。奇怪的行为。 here is the pic - textarea overlaps column
2. 左列上下文未正确对齐。我将如何对齐或证明两列的上下文，使它们最终像这样： here is the pic - final look

我的 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 - 使用适当的填充修复了所有问题

感谢大家的回复。

Answer 1

我认为你可以不使用 js，但使用 CSS Grid 代替。

例子：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; // the width of each column
  grid-template-rows: auto; // row height will auto-adjust to contents
}

<div class="grid-container">
  <div class="column-left">
    ...some dynamic content
    gets bigger and bigger and bigger and         bigger and bigger
  </div>
  <div class="column-right">
    might be empty or small or large
  </div>
</div>

网格行高将始终调整为最大内容的高度，这将使两列的高度相同。

Answer 2

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

如果是这种情况，请尝试这个简单的修复 - 在您的 CSS 中，将 textarea 高度设置为 100% 以自动填充其父项：

textarea {
   height: 100%;
};

这是一个示例答案： Textarea to fill a parent container exactly, with padding

Answer 3

您的代码不起作用的原因是因为您没有将高度设置为 textarea 将 height 设置为 100% 将始终使其适合其容器的最大大小 (<div>)我还添加了box-sizing: border-box;，以便您可以在columnright 中添加填充。

可以在这里找到关于box-sizing 的更好解释（只是不会在这里解释，因为我不能做得更好）：https://css-tricks.com/box-sizing/

function 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() {
    let columnleft = document.getElementById('columnleft');
  columnleft.innerHTML += '<h1>a</h1>';
});

.row{
    display: flex; 
}

.column {
  border: 1px solid #333;
}

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

<div class="row">
  <div id="columnleft" class="column columnleft">
    
  </div>
  <div id="columnright" class="column columnright">
    <textarea></textarea>
  </div>
</div>

<button id="add">
  add
</button>

每次您点击add 时，它都会在您的左栏中添加一个<h1>，并且您的textarea 将获得与columnleft 相同的高度。

Answer 4

这是一个类似于您的界面的基本演示，它在父容器上使用display: grid 自动保持两个内部 div 的高度相同。 （点击蓝色细节元素触发高度变化。）

这非常简单。 （感谢您激励我最终了解 grid 的工作原理。）

// The JavaScript isn't needed for the dynamic styling. (It just copies the text.)
const
  left = document.getElementById("left"),
  right = document.getElementById("right");
left.addEventListener("change", showOutput);

function showOutput(event){
  right.innerHTML = this.querySelector("#reasons").value
}

div { max-width: 400px; border: 1px solid grey; }
details{ margin: 10px 5px; color: #0000DD; text-decoration: underline; }

/* This is where the magic happens */
#container { display: grid; grid-template-columns: 1fr 1fr; }

#left{ padding: 10px; }
#right { white-space: pre-wrap; }

<div id="container">
  <div id="left">
    <label> <input type="checkbox"/> I like pie </label>
    <details>
      <summary>Type your reasons here</summary> <textarea id="reasons"></textarea>
    </details>
  </div>
  <div id="right"></div>
</div>