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

Question

我想制作一个与页面高度相同的文本框。现在我似乎只能让它与文本框中的内容高度相同。我不知道是我还没有找到用 css 描述它的正确方法，还是我的 jQuery 插件弄乱了它。

我可以给它 padding-top/bottom 来增加文本框的高度，但是如果我给它太多填充，文本就会被压低。

框内的文本已被赋予“文本内容”类，我已将以下 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，这很容易通过定义 100vh 的 height 来实现。

.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和body的margin，默认为1px 和 8px，分别。这意味着使用 100vh 实际上会强制页面滚动。您可以通过将 .text-content 的 border 和 body 的 margin 归零来轻松补偿。

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