Javascript 如何在jQuery对话框中拉伸div和输入元素？

我已准备好回答我的问题：

正如您在上面的屏幕截图中所看到的，有一个黄色的

div

元素表示聊天区域，下面是用于输入聊天信息的文本输入

请帮我解决我的问题-

如何“拉伸”

chatDiv

和

chatInput

元素，以便它们在对话框中占据最大的空间

正如您在屏幕截图中所看到的，当前这些元素周围有很多填充，尤其是文本输入元素（因为我不知道除了设置

size

属性外，如何调整其宽度）

显然，我正在寻找一个最可移植的解决方案，适用于任何（或大多数）浏览器和字体大小

这是我的密码-

函数sendChat（）{
var str=$（'#chatInput'）.val（）.trim（）；
$（'#chatDiv'）。追加（'
'+str）；
$（'#chatInput'）.val（''）；
var h=$（'#chatDiv'）.prop（'scrollHeight'）；
$（'#chatDiv'）。动画（{scrollTop:h}，1000）；
$（'#chatInput'）.focus（）；
}
$（'#chatInput'）。关于（'keyup input'，函数（e）{
如果（e.keyCode==13）{
sendChat（）；
}
});
$（'#chatDlg'）。对话框({
最小宽度：500，
莫代尔：是的，
按钮：{
“发送”：函数（）{
sendChat（）；
},
“关闭”：函数（）{
//$（this.dialog（'close'）；
}
}
});
@导入url（“https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
分区#查特迪夫{
保证金：0自动；
背景颜色：黄色；
高度：120px；
溢出：自动；
}



您可以为需要100%宽度的元素添加
类
属性
然后定义该类的CSS：

.fullwidth {
  width: 100%;
}

演示：
您可以为需要100%宽度的元素添加一个
class
属性
然后定义该类的CSS：

.fullwidth {
  width: 100%;
}

演示：
实现这一点的一种简单的跨浏览器方法是在对话框内部使用一些绝对定位，同时确保
#chatDiv
内容不会落后于输入。这是通过设置与输入高度相等的填充底部来实现的：


#聊天室{
位置：相对位置；
高度：500px；
边框：实心1px灰色；
}
#查特迪夫，
#聊天输入{
框大小：边框框；
位置：绝对位置；
宽度：100%；
}
#查特迪夫{
身高：100%；
背景：黄色；
填充底部：30px；/*聊天输入的高度*/
}
#聊天输入{
底部：0；
左：0；
高度：30px；
线高：30px；
}
实现这一点的一个简单跨浏览器方法是在对话框内部使用一些绝对定位，同时确保
#chatDiv
内容不会落后于输入。这是通过设置与输入高度相等的填充底部来实现的：


#聊天室{
位置：相对位置；
高度：500px；
边框：实心1px灰色；
}
#查特迪夫，
#聊天输入{
框大小：边框框；
位置：绝对位置；
宽度：100%；
}
#查特迪夫{
身高：100%；
背景：黄色；
填充底部：30px；/*聊天输入的高度*/
}
#聊天输入{
底部：0；
左：0；
高度：30px；
线高：30px；
}

#chatInput{width:100%}
并删除
标记谢谢-以及如何处理
size=“20”
属性？是的，您可以删除它，您不需要它
#chatInput{width:100%}
并删除
标记谢谢-以及如何处理
size=“20”
attribute？是的，您可以删除它，您不需要它