Fatal编程技术网
  • html/
  • Html 如何制作<；textarea>；使用剩余的可用高度

Html 如何制作<；textarea>；使用剩余的可用高度

html css bootstrap-4

Html 如何制作<；textarea>；使用剩余的可用高度,html,css,height,textarea,bootstrap-4,Html,Css,Height,Textarea,Bootstrap 4,我正在尝试创建一个“聊天窗口”，我已经整理好了大部分内容，但不知何故，我无法让“对话”文本区域垂直占据窗口的其余部分 这是我的完整页面代码（我要调整的文本区域是div id=“conversation”中的文本区域）： 聊天原型 任务栏 用户列表 会话 发送 使用style=，非引导的每一个css片段都分别位于元素中 到目前为止，我已经尝试了一些方法： 相对高度：定义，但窗口最小化时会产生不希望的结果（它根据屏幕大小而不是窗口大小保持大小） 柔性进近：放置显示：柔性；灵活的方向：在div i

我正在尝试创建一个“聊天窗口”，我已经整理好了大部分内容，但不知何故，我无法让“对话”文本区域垂直占据窗口的其余部分

这是我的完整页面代码（我要调整的文本区域是
div id=“conversation”
中的文本区域）：


聊天原型
任务栏
用户列表
会话
发送
使用
style=
，非引导的每一个css片段都分别位于元素中

到目前为止，我已经尝试了一些方法：

  • 相对
    高度：
    定义，但窗口最小化时会产生不希望的结果（它根据屏幕大小而不是窗口大小保持大小）

  • 柔性进近：放置
    显示：柔性；灵活的方向：在
    div id=conversation
    上的列
    ，然后在
    div id=chatWindow上
    始终在文本区域使用
    flex:1
    ，但没有结果。我在Stack Overflow的其他问题上看到了这个解决方案，所以决定尝试一下

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

    有关更多信息，请参见此链接：

    好，因此“user123”的回答基本正确，但在浏览器兼容性方面，由于
    $（window.innerHeight（），它给我带来了问题
根据w3schools的描述，它是“窗口内容区域的内部高度”
    
然而，这只适用于Edge和IE11。为了让它在Edge、IE11、Firefox和Chrome上运行，我必须使用
    $（window.outerHeight（）。
W3中描述为“窗口的外部高度，包括工具栏/滚动条”
    
一句话：就“意义”而言，它没有任何意义，但我使用outerHeight（）而不是innerHeight（）函数实现了它
    

    PS：作为提醒注意的答案发布。
    你能详细说明一下“但当窗口最小化时，会产生不可检测的结果（它根据屏幕大小而不是窗口大小保持大小）。”？主要是，窗口和屏幕之间的区别。因此，我的屏幕可以是1920x1080，但我的窗口可能只占屏幕的一小部分（如未最大化时）。谢谢，这很有效。只是调整大小部分不起作用（边缘和镀铬）。尝试调查原因。在chrome和edge上测试此演示：，如果此演示正常，则意味着您需要在代码或某种内联样式中检查css属性。更多信息：

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

    

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

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