Question

＆lt; p＆gt;我正在尝试创建一个“聊天窗口”，我已经解决了大部分事情，但不知怎的，我无法让“对话”textarea垂直占据窗口的其余部分。＆lt; / p＆gt; ＆lt; p＆gt;这是我的完整页面代码（我要调整的textarea是＆lt; code＆gt; div id =“conversation”＆lt; / code＆gt;）中的一个：＆lt; / p＆gt; ＆LT;预＆GT;＆LT;代码＆GT;＆LT; HTML＆GT; ＆LT; HEAD＆GT; ＆lt; meta charset =“utf-8”＆gt; ＆lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css”＆gt; ＆LT;标题＆GT; 聊天原型＆LT; /标题＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆lt; div id =“completeSite”style =“display：flex; flex-flow：row wrap”＆gt; ＆lt; div id =“taskBar”class =“col-md-12”style =“border-style：solid;”＆gt; TASKBAR ＆LT; / DIV＆GT; ＆lt; div id =“userList”class =“col-md-2”style =“border-style：solid;”＆gt; USERLIST ＆LT; / DIV＆GT; ＆lt; div id =“chatWindow”class =“col-md-10”style =“border-style：solid;”＆gt; ＆lt; div id =“conversation”class =“row”＆gt; ＆lt; textarea readonly class =“form-control”style =“overflow：auto; resize：none; border-style：solid;”＆gt; CONVERSATION＆lt; / textarea＆gt; ＆LT; / DIV＆GT; ＆lt; div id =“MessageInput”class =“input-group row”＆gt; ＆lt; textarea class =“form-control”id =“message”placeholder =“Message”style =“height：200px; overflow：auto; resize：none;”＆gt;＆lt; / textarea＆gt; ＆lt; span class =“input-group-btn”＆gt; ＆lt; button class =“btn”id =“submitMessageButton”type =“button”style =“height：200px; background-color：＃999999”＆gt; Send＆lt; / button＆gt; ＆LT; /跨度＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js”＆gt;＆lt; / script＆gt; ＆LT; /体＆GT; ＆LT; / HTML＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;非引导程序的每一段css都使用＆lt; code＆gt; style =＆lt; / code＆gt;单独包含在元素中。＆lt; / p＆gt; ＆lt; p＆gt;到目前为止，我尝试了一些事情：＆lt; / p＆gt; ＆LT;醇＆GT; ＆lt; li＆gt;＆lt; p＆gt;相对＆lt; code＆gt; height：＆lt; / code＆gt;定义，但是当窗口最小化时会产生不良结果（它根据屏幕大小而不是窗口大小来保持大小）。＆lt; / p＆gt;＆lt; / li＆gt; ＆lt; li＆gt;＆lt; p＆gt; Flex方法：放置＆lt; code＆gt; display：flex;挠曲方向：柱＆LT; /代码＆GT;在＆lt; code＆gt; div id = conversation＆lt; / code＆gt;上然后在＆lt; code＆gt; div id = chatWindow＆lt; / code＆gt;上始终使用＆lt; code＆gt; flex：1＆lt; / code＆gt;在textarea上，但没有结果。我在Stack Overflow的其他一些问题上看到了这个解决方案，因此决定明确地试一试。＆lt; / p＆gt;＆lt; / li＆gt; ＆LT; /醇＆GT;

Answer 1

Ok, so the answer from "user123" was mostly correct but, in terms of browser compatibility it was giving me problems due to $(window).innerHeight(); Which, according to the w3schools description is "the inner height of a window's content area"

However, this was only working on Edge and IE11. To get it working on Edge, IE11, Firefox and Chrome I had to use $(window).outerHeight();. Which is described at w3schools as being "the outer height of a window, including toolbars/scrollbars"

Bottom-line: In terms of "sense", it makes none of it but I got it working using the outerHeight() instead of the innerHeight() function.

PS:Posted as an answer to call attention.

Answer 2

将窗口高度指定为聊天框高度。添加您自己的代码ID或类名，而不是“#myDiv”。

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

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

有关详情，请参阅此链接：ViewPort

如何使<textarea>使用其余可用高度

2 个答案: