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

How to make a text-box same height as the window?

本文关键字：高度 窗口 何使 文本      更新时间：2023-09-26

我想制作一个与页面高度相同的文本框。目前，我似乎只能将其设置为与文本框中的内容相同的高度。我不知道是我还没有找到用css描述它的正确方法，还是我的jQuery插件搞砸了它。

我可以给它上下填充，这会增加文本框的高度，但如果我给它太多填充，文本就会被向下推。

框内的文本被赋予了类"文本内容"，我对其应用了以下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;
}

此处的示例

使用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归零来轻松进行补偿。

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

相关文章：