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

Question

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

Answer 1

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

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

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

• 妥协95%,或
• 在textarea上设置填充和边框为0/none,或
• 使用"box-sizing:border-box;"来改变'height'的含义.这是一个CSS未来的汤功能,需要许多额外的浏览器特定重述(例如'-moz-box-sizing').

Answer 2

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

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

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

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

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

textarea {
  height: 50vh;
}

<textarea></textarea>

它是相当不错的支持在不同的浏览器,除了Opera Mini的和部分支持IE.