CSS调整大小属性：同时调整所有元素的大小？答案

【问题标题】：CSS resize property: Resize all elements simultaneously?CSS调整大小属性：同时调整所有元素的大小？
【发布时间】：2020-11-25 13:46:45
【问题描述】：

给定一个页面，其中包含 5 个文本框，可通过 css resize 属性调整高度。

如果用户调整其中一个的大小，所有 5 个文本框应该同时调整大小。

如何做到这一点？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Resize Textboxes Simultaneously</title>
  <style>
    textarea {
      resize: vertical;
      height: 16px;
      width: 18%;
    }
  </style>
</head>

<body>
  <textarea>
    Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent.
  </textarea>
  <textarea>
    Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.
  </textarea>
  <textarea>
    Sive enim ad sapientiam perveniri potest, non paranda nobis solum ea, sed fruenda etiam [sapientia] est; sive hoc difficile est, tamen nec modus est ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum id, quod quaeritur, sit pulcherrimum. etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? sin laboramus, quis est, qui alienae modum statuat industriae? nam ut Terentianus Chremes non inhumanus, qui novum vicinum non vult 'fodere aut arare aut aliquid ferre denique' -- non enim illum ab industria, sed ab inliberali labore deterret --, sic isti curiosi, quos offendit noster minime nobis iniucundus labor.
  </textarea>
  <textarea>
    Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam?
  </textarea>
  <textarea>
    A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt. an 'Utinam ne in nemore . . .' nihilo minus legimus quam hoc idem Graecum, quae autem de bene beateque vivendo a Platone disputata sunt, haec explicari non placebit Latine?
  </textarea>
</body>

</html>

【问题讨论】：

哪 5 个文本框？在您的问题中没有文本框，只有 1 个文本区域。没有上下文是不可能找到解决方案的。
@pavel 对不起，我现在用一个例子更新了这个问题。

标签： css

【解决方案1】：

在纯 CSS 中找不到实现此目的的方法，因此请在此处提供一个 JS/CSS 解决方案以防万一。

基本上我们使用 ResizeObserver 方法来捕捉文本区域的大小调整并更新其他文本区域的高度。我们不允许一次处理多个区域的大小调整，否则可能会出现一些不需要的循环。

const areas = document.getElementsByTagName('textarea');
let curResizer = 0;
let curTimeout = 0;

for (let i=0; i<areas.length; i++) {
  new ResizeObserver(resizeAll).observe(areas[i]);
}

function resizeAll(curObserved) {

  if  (curResizer == 0 ) { curResizer = curObserved[0].target; }
  if ( curResizer == curObserved[0].target) { 
    for (let i=0; i<areas.length; i++) {
    //does the system always get the height in curResizer set up before the resize observed code is run 
      if (areas[i] != curResizer) {areas[i].style.height = curResizer.style.height;
      }
    }
  }
  if (curTimeout != 0) {clearTimeout(curTimeout);}
  curtimeout = setTimeout(clearCur,1000);// bit of a hack ? could use unobserve?
}
function clearCur() { curResizer = 0; }

textarea {
  resize: vertical;
   height: 16px;
}

<textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>

在某些系统上显示了 ResizeObserver 循环错误，但根据https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded，它们是良性的，只是意味着它无法跟上。

【讨论】：

@A Haworth 这正是我想要的，谢谢！