Question

我想创建一个与页面高度相同的文本框。现在我似乎只能使它与文本框中的内容具有相同的高度。我不知道我是不是找不到用css描述它的正确方法，或者它是我的jQuery插件与它混淆。

我可以给它填充顶部/底部，这会增加文本框的高度，但是如果我给它太多的填充，文本会被推下来。

框内的文字已被赋予“text-content”类，我已将以下css应用于它：

.text-content{
margin: auto;
width:40%;
font-family: 'Open Sans', sans-serif;
background-color: rgba(213,213,213,0.5);
padding-left: 10px;
padding-right: 10px;
}

Example here

Answer 1

使用CSS3，通过定义height 100vh轻松完成。

.text-content {
    margin: auto;
    width: 40%;
    font-family: 'Open Sans', sans-serif;
    background-color: rgba(213,213,213,0.5);
    padding-left: 10px;
    padding-right: 10px;
    height: 100vh;
}

JSFiddle：http://jsfiddle.net/3uczbe0s/

这不会考虑border的{{1}}和margin的{{1}}，其默认值分别为body和1px。这意味着使用8px实际上会强制页面滚动。您可以通过将100vh的{{1}}和border的{{1}}归零来轻松进行补偿。

唯一的另一个选择是使用脚本来操纵它的高度，这也是向后兼容的。

如何使文本框的高度与窗口相同？

1 个答案: