Question

当我在textarea中放置多行时，它不会使其父级更高，但会获得滚动条（因此不像典型的div）。我想这是默认行为，但我想让它重新调整父级。父有一些初始高度，但应该能够变得更高（想想多线聊天输入）。

代码：

<div class="parent">
  <textarea></textarea>
  <div class="other"></div>
<div>


.parent {
  position: absolute;
  bottom: 0
  height: auto;
}
textarea {
  min-height: 52px
  height: auto
}
.other {
  height: 52px
}

将textarea包裹在另一个div中不会改变任何内容。

Answer 1

是的，textarea保持相同高度的默认行为。

你可以使用像autogrow.js这样的插件来增加textarea的高度（同时增加父高度）。

Answer 2

我之前使用过这个jQuery库已经完成了这个，遗憾的是在纯CSS中无法做到这一点。

http://www.jacklmoore.com/autosize

Answer 3

试试这个..！可能会有帮助

<textarea style="overflow:auto"></textarea>

或者

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

或者

<textarea style="resize:none"></textarea>

否则试试这个。！

<强> code.css

div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
  overflow: auto;
}
.of_none {
  -ms-overflow-style: none;
}
.of_scrollbar {
  -ms-overflow-style: scrollbar;
}

<强> code.html

<body>
  <div class="of_none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="of_scrollbar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>

Answer 4

你可以用杰克摩尔的Autosize来做。

您可以在以下网站上找到该文档：Autosize by Jacklmoore

用法：

// from a jQuery collection
autosize($('textarea'));

Textarea不会使其父母更高

4 个答案: