html - HTML文本区域显示动态文本的一半高度

HTML <textarea>在首次加载[页面加载时]时会显示动态文本高度的一半，如下所示：


当您集中注意力并开始键入或按向左或向右箭头键时，它将以所需的高度显示文本。


如何使动态文本在首次加载时以其全高显示而不必关注<textarea>并按向右/向左箭头键？这是HTML和CSS代码：

textarea {
  height: 55px;
  background-color: #009688;
  font-size: 55px;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid white;
}

<textarea id="location" style="overflow:hidden"></textarea>

谢谢。

最佳答案

您希望高度像使用box-sizing一样包含padding和border的大小，因此您的高度应该是字体的大小加上顶部和底部的padding和border的大小

在这种情况下，它是55px（字体）+ 24px（顶部12px和底部12px填充）+ 2px（边框-您没有顶部，底部2px）= 81px

textarea {
    height: 81px;
    background-color: #009688;
    font-size: 55px;
    line-height:55px;         /* added this just to ensure the line height is the same as the font size */
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid white;
}

<textarea id="location" style="overflow:hidden">someText</textarea>

关于html - HTML文本区域显示动态文本的一半高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46341244/