时间戳

首页 > 解决方案 > 如何动态使两列高度相同

javascript - 如何动态使两列高度相同

问题描述

我有一个有两列的页面。我想 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 - 所有内容都通过适当的填充修复

谢谢大家的回复。

标签： javascripthtmlcss

解决方案

我认为您可以在没有 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>

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

推荐阅读