Question

我的布局看起来大致如下：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;
}

主要内容是垂直弹性框，中央窗格填充可用空间，而其下方的文本区域具有固定大小。

我想让这个textarea垂直调整大小。

如示例所示，这在技术上有效，但界面非常反直觉。即使textarea增长向上（因为这就是flexbox的布局方式），我必须在右下角使用一个手柄并将其向下拖动以使其增长

是否有可能将调整大小手柄放在textarea的顶部边缘？（最好没有额外的库和JS，但我不太乐观。）

Answer 1

更新：我找到了一个使用jQuery UI的解决方案。它不是那么简单，涉及到CSS黑客攻击。

在这种情况下，开箱即用将不起作用，使用此代码段可以测试：

$(inputField).resizable({handles: 'n'});

虽然这会在顶部放置一个可拖动的调整大小句柄，但jQuery UI将同时尝试使用position: relative重新定位textarea，以便在其增长时保持其底部边缘。

因为flexbox模型已经将textarea的下边缘保持在适当的位置，这是多余的。 jQuery UI将导致整个textarea以与其增长相同的速率向上移动。

虽然似乎没有办法告诉jQuery跳过重新定位，但我通过将top: 0!important添加到CSS来修复它。

将textarea调整大小手柄放在顶部

1 个答案: