我有一个弹出的 jQuery 对话框,允许用户发送确认电子邮件。我有一些文本,然后是一个文本区域。该对话框是可扩展的,我希望文本区域填满对话框的整个区域,除了顶部显示文本所需的 50 像素左右的高度。
将文本区域高度正确设置为 100% 可使文本区域随着对话框大小的变化而扩展/收缩。但是,它没有在顶部为文本留出空间。
我如何让文本区域填充对话框的整个区域(高度和宽度),除了我的文本所在的前 50 像素高度。
谢谢。
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>
最佳答案
你可以使用绝对定位。
更新:当给定绝对定位时,textarea 不会延伸到其父级,因此我设置了 textarea 周围的 div 的样式,textarea 只会根据 div 的尺寸自行调整。
参见 working example here .我玩 bottom 和 right 来调整文本区域的边框和填充,不是最好的,可能会被调整,但它有效。
所以让它工作的基本东西是这样的:
#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这是相关的,并通过将包装器伪装成文本区域本身来扩展它:
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 */
}
关于jquery - jQuery UI 对话框中的文本区域高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5489325/