jQuery UI 对话框中的文本区域高度/宽度

Question

我有一个弹出的 jQuery 对话框，允许用户发送确认电子邮件。我有一些文本，然后是文本区域。对话框是可展开的，我希望文本区域填满对话框的整个区域，除了我需要在顶部显示文本的 50 像素左右的高度。

将 textarea 高度正确设置为 100% 允许 textarea 随着对话框大小的变化而扩展/收缩。但是，它不会在顶部为文本留出空间。

我如何让 textarea 填充对话框的整个区域（高度和宽度），除了我的文本所在的前 50px 高度。

谢谢。

HTML：

<div id="dialog-message-email" title="Send Email">

    <p style="height:50px">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Confirmation Email to be sent to user.
    </p>
    <div>
    <textarea id="ConfirmEmailText" class="ui-corner-all ui-widget-content" style="height:100%;padding:5px; font-family:Sans-serif; font-size:1.2em;"></textarea>
    </div>

    </div>

Answer 1

您可以使用绝对定位。

更新：当给定绝对定位时，textarea 不会拉伸到其父级，所以我设置了 textarea 周围的 div 的样式，textarea 只会根据 div 的尺寸调整自身。

见working example here。我使用底部和右侧来调整文本区域的边框和填充，不是最好的，可能会被调整，但它可以工作。

所以使它工作的基本东西是这样的：

#dialog-message-email {
    position: relative;
    min-height: 200px; /* the child is absolute, so we need a minimum height */
}

#dialog-message-email div { /* this one will stretch */
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
      right: 0;
}

#ConfirmEmailText { /* and the textarea follows its parent's dimensions */
      width: 100%;
      height: 100%;
}

更新 2：我刚刚偶然发现了相关的 a great article，并通过将包装器伪装成 textarea 本身来扩展它：

div {
  position: absolute;
  left: 5px; 
  top: 5px;
  right: 5px; 
  bottom: 5px;
  border: 1px solid #CCC; /* style like textarea */
}

textarea {
  width: 100%;
  height: 100%;
  margin: 0; /* don't want to add to container size */
  border: 0; /* don't want to add to container size */
}

Answer 2

您是否尝试过为<textarea> 设置上边距？像这样的：

<textarea id="ConfirmEmailText" class="ui-corner-all ui-widget-content" style="height:100%;padding:5px; margin-top:50px; font-family:Sans-serif; font-size:1.2em;"></textarea>