如何在jQuery对话框中拉伸div和input元素？

Question

我已为我的问题准备了a simple jsFiddle：

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

请帮我解决我的问题 -

如何＆＃34;伸展＆＃34; chatDiv和chatInput元素，以便它们在对话框中占据最大空间量？

正如您在屏幕截图中看到的那样，这些元素周围存在大量填充，特别是在文本输入元素周围（因为我不知道，除了设置size属性之外，如何调整其宽度）。

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

这是我的代码 -

＆＃13;

＆＃13;

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');
    }
  }
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我想要的形象：

Answer 1

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

.fullwidth {
  width: 100%;
}

DEMO：https://jsfiddle.net/cmgk0d83/6/

Answer 2

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

#chatDlg {
  position: relative;
  height: 500px;
  border: solid 1px grey;
}
#chatDiv,
#chatInput {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
}
#chatDiv {
  height: 100%;
  background: yellow;
  padding-bottom: 30px;/* height of the chat input */
}
#chatInput {
  bottom: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
}

<div id="chatDlg">
  <div id="chatDiv"></div>
  <input id="chatInput" type="text" />
</div>

如果跨浏览器不是一个问题我会说这对于flexbox列来说是一个理想的用例，这将消除手动偏移输入高度的需要。