Question

我正在创建一个在页面中水平和垂直居中的TextArea。鉴于我需要TextArea垂直居中，我不能让textarea为100w和100h，我需要它从一个小高度开始然后随着用户类型增长。我还需要一个单击捕获器，因此如果用户单击textarea周围的区域，则textarea会聚焦。（灰色bkg仅用于调试目的）

我在这里有关于CodePen的演示：https://codepen.io/anon/pen/OQbvxa

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html, body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.page-body.fullScreen {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #EFEFEF;
  text-align: left;
  padding: 0!important;
  align-items: normal;
  justify-content: normal;
}

form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

form .textAreaClickCapturer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center
}

form .field {
  width: 100%;
  margin: 0;
  padding: 24px;
  clear: both;
  max-height: max-content;
  height: 100%;
  align-items: center;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

当你输入多行时，TextArea确实增长很好，但最终，TextArea增长超过了屏幕的大小，导致它破坏。

如何让TextArea增长到TextArea不在页面后面并且中断但是有一个工作溢出来处理大量文本？

期望的初步经验

当textarea越过周围的div时，用户界面破碎。

谢谢！

Answer 1

主要原因是，当使用align-items: center和/或justify-content: center时，元素会溢出其父级，在本例中为top / bottom。

要解决这个问题，需要使用自动边距，并且能够控制垂直和水平，顶部/底部，左/右等对齐。

您的代码中有很多height: 100%（我已清理过），并与Flexbox结合使用会导致更多问题，因此请使用Flexbox自己的属性，例如：此处{flex}列项目flex: 1，将填充父级的高度。

还添加了min-height: 0，以便Firefox一起播放。

Updated codepen

Stack snippet

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.page-body.fullScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #efefef;
  min-height: 0;
}

form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .textAreaClickCapturer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  padding: 0;
  width: 90%;
  text-align: center;
  overflow: auto;
  margin: auto;
}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

Answer 2

我认为您可以使用max-width和max-height：

textarea {
  ...
  max-width: 100%;
  max-height: 100%;
}

<强>更新

我简化了HTML和CSS，摘录：

autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() {
  $("#note").focus();
});

html, body, form {
  height: 100%;
}

body {
  background: #efefef;
  margin: 0;
}

form {
  display: flex;
  align-items: center; /*center vertically*/
  padding: 24px;
  box-sizing: border-box;
}

textarea {
  font-size: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

<form class="textAreaClickCapturer" action="/">
  <textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>

Answer 3

我在你的笔中尝试了以下内容：

在CSS的textarea选择器中，添加：

max-height: 90%; overflow: auto;

如果输入的内容超过最大高度，则会为您提供滚动条，并且最大高度由包含div的大小控制。

Answer 4

添加一个最大高度，就像其他人说的那样，我个人更喜欢在你的情况下与高度相关时使用vh。所以在你的笔中它只会是：

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;
  max-height:50vh;
}

然后你被摆平了。你的垂直溢出默认是滚动的，所以你根本不需要做任何事情。

如何防止调整大小的TextArea溢出页面？

4 个答案: