如何自动调整 App.js 文本区域高度以填充屏幕的其余部分？答案

【问题标题】：how to auto-adjust App.js textarea height to fill the remainder of screen?如何自动调整 App.js 文本区域高度以填充屏幕的其余部分？
【发布时间】：2016-08-12 09:31:43
【问题描述】：

可能有人知道如何自动调整 textarea 的高度以垂直填充其余空间吗？最简单的方法是使用 height: 300px 或其他东西对 textarea 的样式进行硬编码，但这在生产中几乎不是可行的解决方案。

这是我的html。谢谢

  <body>
    <div class="app-page" data-page="home">
      <div class="app-topbar">
        <div class="app-title">Mobile Email Client</div>
      </div>
      <div class="app-content">
        <div class="app-section">
          <div class="app-button" data-target="emailEditor">Compose Email</div>
        </div>
      </div>
    </div>

    <div class="app-page" data-page="emailEditor">
      <div class="app-topbar">
        <div class="app-title"><span class="app-icon"></span>Email Editor</div>
        <div class="left app-button" data-back>QUIT</div>
      </div>

      <div class="app-content">
        <div class="app-section" id="editorStatus"></div>

        <div class="app-section">
          <input class="app-input" id="emailFrom" placeholder="From">
        </div>

        <div class="app-section">
          <input class="app-input" id="emailTo" placeholder="To">
        </div>

        <div class="app-section">
          <input class="app-input" id="emailSubject" placeholder="Subject">
          <textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
          <div class="app-button green app-submit" id="emailSend">Send</div>
        </div>
      </div>
    </div>

【问题讨论】：

标签： height textarea rows appjs

【解决方案1】：

在 App.js 中，显然为 <textarea> 设置 rows="10" 属性是不够的。 <textarea> 还必须有一个 CSS height: auto;

这仍然不能让您为任何尺寸的屏幕动态填充屏幕的其余部分。

【讨论】：