我的布局大致如下所示：https : //jsfiddle.net/cburschka/bcnvzsrt/
<div id="body">
<div id="header"></div>
<div id="content">
<div id="messages"></div>
<div id="sidebar"></div>
</div>
<div id="input">
<textarea id="inputField"></textarea>
</div>
<div id="footer"></div>
</div>
CSS：
html, body, #body {
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
#body {
display: flex;
flex-direction: column;
}
#content {
flex-grow: 1;
width: 100%
display: flex;
flex-direction: row;
overflow: auto;
}
#messages {
flex-grow: 1;
overflow-y: auto;
}
#sidebar {
overflow-y: auto;
}
#inputField {
box-sizing: border-box;
width: 100%;
resize: vertical;
}
主要内容是一个垂直的flexbox，中间的窗格填充了可用空间，而其下方的文本区域具有固定的大小。
我想使此textarea垂直调整大小。
如示例中所示，这在技术上是可行的，但是该界面在很大程度上是违反直觉的。即使textarea向上增长（因为flexbox的布局方式如此），我也必须使用右下角的手柄并将其向下拖动以使其增长。
有没有将大小调整手柄上的文本区域而不是顶部边缘的任何机会呢？（最好没有额外的库和JS，但我不太乐观。）
更新：我找到了使用jQuery UI的解决方案。它不是很简单，并且涉及CSS hack。
使用它开箱不会在这种情况下工作，因为在这个片段中可测试：
$(inputField).resizable({handles: 'n'});
尽管这将在顶部放置一个可拖动的调整大小手柄，但jQuery UI将同时尝试使用来重新定位文本区域position: relative，以随着其增长将其底部边缘保持在适当的位置。
因为flexbox模型已经将textarea的底部边缘保持在适当的位置，所以这是多余的。jQuery UI将导致整个文本区域以与增长相同的速率向上移动。
虽然似乎没有成为一个方式告诉jQuery来跳过重新定位，我通过增加固定它top: 0!important的CSS。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句