如何使 <textarea> 使用剩余的可用高度

Question

我正在尝试创建一个 "chat window"，我已经解决了大部分问题，但不知何故我无法让 "conversation" 文本区域垂直占据 window 的其余部分。

这是我的整页代码（我要调整的textarea是div id="conversation"里面的那个）：

<html>

<head>
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">

<title>
chat prototype
</title>
</head>

<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >

<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>

<div id="chatWindow" class="col-md-10" style="border-style:solid;">

<div id="conversation" class="row">
<textarea readonly class="form-control"  style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>

<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>

<span class="input-group-btn">
        <button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color:  #999999">Send</button>
</span>

</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
</body>

</html>

每个 css 中不是 bootstrap 的部分都单独在使用 style= 的元素中。

到目前为止我已经尝试了一些东西：

相对 height: 定义，但是当 window 最小化时会产生不良结果（它会根据屏幕尺寸而不是 window 尺寸).
Flex 方法：将 display:flex; flex-direction:column 放在 div id=conversation 上，然后放在 div id=chatWindow 上，始终在文本区域上使用 flex: 1，但没有结果.我在 Stack Overflow 的其他一些问题上看到了这个解决方案，所以显然决定尝试一下。

Answer 1

将您的 window 高度分配给您的聊天框高度。添加您自己的代码 ID 或 class 名称，而不是“#myDiv”。

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).outerHeight();
    $('#myDiv').css('min-height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

有关更多信息，请参阅此 link：ViewPort

Answer 2

好的，所以 "user123" 的答案大部分是正确的，但是，就浏览器兼容性而言，由于 $(window).innerHeight();，它给我带来了问题其中，根据 w3schools 的描述是 "the inner height of a window's content area"

但是，这仅适用于 Edge 和 IE11。为了让它在 Edge、IE11、Firefox 和 Chrome 上运行，我不得不使用 $(window).outerHeight();。 w3schools 将其描述为 "the outer height of a window, including toolbars/scrollbars"

底线：就 "sense" 而言，它实现了 none，但我使用 outerHeight() 而不是 innerHeight() 函数使其工作。

PS:作为答案发布，请注意。

如何使 <textarea> 使用剩余的可用高度

How to make <textarea> use rest of the height available

html

css

height

textarea

bootstrap-4