如何自动调整App.js textarea高度来填充屏幕的剩余部分?

时间:2016-04-19 23:43:44

标签: height textarea rows appjs

可能有人知道如何自动调整textarea的高度以垂直填充剩余的空间?简单的方法是硬编码textarea的样式高度:300px或其他东西,但这在生产中几乎不可行。

这是我的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>

1 个答案:

答案 0 :(得分:0)

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

这仍然无法让您为任何大小的屏幕动态填充屏幕的其余部分。