如何增加骨架 css textarea 高度

Question

Skeleton css 具有固定的文本区域高度。这是它的代码。

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

只需删除 % 和 .u-full-height 并为其添加一个像素值。

Answer 2

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

或

为了使百分比值适用于身高，必须确定 parent 的身高。

这应该有效：

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

由于 parent 元素，现在文本区域的高度为 500px。

Answer 3

百分比高度不起作用。但是，有一种解决方法，您不必使用固定高度！

CSS

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

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

查看实际效果：https://jsfiddle.net/6fhLhcs9/

如果您还有其他问题，请告诉我！

如何增加骨架 css textarea 高度

How to increase skeleton css textarea height

html

css

skeleton-css-boilerplate