CSS:textarea的高度占视口高度的百分比

我想说文本区域的高度等于,例如,视口高度的50%.我怎样才能做到这一点？一个简单的height: 50%不做的伎俩.

一个简单的高度:50%不起作用.

不,因为它的父级没有明确的高度.那么50%的是什么？家长说'自动',这意味着它基于子内容的高度.这取决于父母的身高.哎呀!等等

所以你必须给它的父母一个百分比高度.和父母的父母一直到根.示例文档:

    

    

        x
    

如果你不想在所有东西上设置高度,另一种可能性就是使用绝对定位.这会将尺寸所基于的元素从直接父级更改为最近的祖先,其中"位置"设置不是默认的"静态".如果没有具有定位的祖先元素,则尺寸基于"初始包含块",其大小与视口相同.

最后,由于额外的填充和边界应用于textareas,因此"100%"的微不足道的问题略微过大.你可以解决这个问题:

妥协95%,或

在textarea上设置填充和边框为0/none,或

使用"box-sizing:border-box;"来改变'height'的含义.这是一个CSS未来的汤功能,需要许多额外的浏览器特定重述(例如'-moz-box-sizing').

下面是一个一个小例子textarea使用CSS3这需要视口的高度的正好50%vh 视单元,其是

等于初始包含块高度的1%.

因此,如果我们设置textareato 的高度50vh,它将获得一半的body高度:

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}