如何增加骨骼CSS Textarea高度

Question

骨架CSS具有固定的Textarea高度。这是它的代码。

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

我已经尝试了我的普通解决方案，但它不起作用。

textarea.u-full-height {
    height: 100%;
}

有什么想法？

Answer 1

百分比高度无法正常工作。但是，有一种方法，您不必使用固定的高度！

CSS

textarea.u-full-height {
    height: 100vh;
} 

100vh将高度设置为视口高的100％。该属性可能非常有用，并且是浏览器中广泛支持的CSS属性。

在行动中看到它：https：//jsfiddle.net/6fhlhcs9/

让我知道您是否还有其他问题！

Answer 2

只需删除％和.u-full-height，然后在像素中添加一个值。

Answer 3

如果在您的代码之后声明骨架 - 代码可能已覆盖。

或

为了使高度的百分比值为高度，必须确定父母的高度。

这应该有效：

<div style="height:500px">
 <textarea class="u-full-height"><textarea/>
</div>

现在，Textarea具有500px的高度。