主页 / 问题 / 908155
Accepted
Daniil Dubchenko
Asked:2020-11-18 20:46:37 +0000 UTC2020-11-18 20:46:37 +0000 UTC

调整 textarea 的大小，将滚动添加到父级

  • 772

有一种通信形式 - 一个模式窗口，其中有一个文本区域。有必要在调整大小的过程中可以将 textarea 拉伸到比容器更大的高度，并且容器本身会滚动。

form {
    width: 540px;
    max-height: 700px;
    max-width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1900;
    background-color: gray;
    padding: 25px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

textarea {
  resize:vertical;
}
<form action="">
  <input type="text">
  <textarea></textarea>
  <input type="text">
</form>

在此示例中，您可以将输入字段拉伸到其全高，但不能再拉伸。如果有人怀疑这是由于display: flex. 请赐教

html

1 个回答

  1. Best Answer

    没错 -flex这是一个额外的：

    form {
  width: 540px;
  max-height: 700px;
  max-width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1900;
  background-color: gray;
  padding: 25px;
  overflow-y: auto;
}

form * {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
  height: calc(100% - 50px);
}
    <form action="">
  <input type="text">
  <textarea></textarea>
  <input type="text">
</form>

    • 1

相关问题