如何动态使两列高度相同

Question

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

编辑：一次height: 100%; 被添加到 textarea 它解决了列增长的问题。 但是我遇到了另外两个问题。

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

我的 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 an parent container, 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 的高度相同。 （点击蓝色细节元素触发高度变化。）

这非常简单。 （感谢您启发我最终了解网格的工作原理。）

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