javascript - 如何在 jQuery 对话框中拉伸(stretch) div 和输入元素？

Question

我已经准备好了a simple jsFiddle对于我的问题:

如您在上面的屏幕截图中所见，有一个代表聊天区域的黄色 div 元素，在其下方有用于输入聊天消息的文本输入框。

请帮我解决我的问题-

如何“拉伸(stretch)”chatDiv 和 chatInput 元素，以便它们在对话框中占据最大的空间量？

正如您在屏幕截图中看到的那样，目前这些元素周围有很多填充，尤其是文本输入元素周围(因为我不知道，除了设置 size 之外如何调整其宽度属性)。

显然，我正在寻找一种最便携的解决方案，适用于任何(或大多数)浏览器和字体大小。

这是我的代码-

function sendChat() {
  var str = $('#chatInput').val().trim();
  $('#chatDiv').append('<br>' + str);
  $('#chatInput').val('');

  var h = $('#chatDiv').prop('scrollHeight');
  $('#chatDiv').animate({ scrollTop: h }, 1000);
  $('#chatInput').focus();
}

$('#chatInput').on('keyup input', function(e) {
  if (e.keyCode == 13) {
    sendChat();
  }
});

$('#chatDlg').dialog({
  minWidth: 500,
  modal: true,
  buttons: {
    'Send': function() {
      sendChat();
    },
    'Close': function() {
      //$(this).dialog('close');
    }
  }
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
div#chatDiv {
  margin: 0 auto;
  background-color: yellow;
  height: 120px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="chatDlg">
  <div id="chatDiv"></div>
  <p align="center">
    <input id="chatInput" type="text" size="20" />
  </p>
</div>

这是我想要的图片:

Answer 1

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

.fullwidth {
  width: 100%;
}

演示:https://jsfiddle.net/cmgk0d83/6/