如何使 <textarea> 使用剩余的可用高度
How to make <textarea> use rest of the height available
我正在尝试创建一个 "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 的其他一些问题上看到了这个解决方案,所以显然决定尝试一下。
将您的 window 高度分配给您的聊天框高度。添加您自己的代码 ID 或 class 名称,而不是“#myDiv”。
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).outerHeight();
$('#myDiv').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
有关更多信息,请参阅此 link:ViewPort
好的,所以 "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:作为答案发布,请注意。
我正在尝试创建一个 "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 的其他一些问题上看到了这个解决方案,所以显然决定尝试一下。
将您的 window 高度分配给您的聊天框高度。添加您自己的代码 ID 或 class 名称,而不是“#myDiv”。
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).outerHeight();
$('#myDiv').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
有关更多信息,请参阅此 link:ViewPort
好的,所以 "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:作为答案发布,请注意。