如何使文本框的高度与窗口相同？ [英] How to make a text-box same height as the window?

问题描述

我想创建一个与页面高度相同的文本框。现在我只能看起来与文本框中的内容相同的高度。我不知道，如果我只是没有找到正确的方法来描述它与CSS或者如果它是我的jQuery插件，它搞砸了。

I want to make a text-box that has the same height as the page. For now I can only seem to make it the same height as the content I have inside the text-box. I don't know if I just haven't found the proper way to describe it with css or if it's my jQuery plugin that messes with it.

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

I can give it padding-top/bottom which increases the height of the text-box, but I if I give it too much padding the text gets pushed down.

框中的文本已被赋予类'text-content'，并且我已经应用了以下css：

The text inside the box has been given the class 'text-content' and I've applied the following css to it:

.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

推荐答案

使用CSS3，通过定义

Using CSS3, that's easily accomplished by defining a height of 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/

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

这并不考虑 border 和 body 的 margin （默认值为 1px 和 8px 。这意味着使用 100vh 实际上会强制页面滚动。您可以通过将 .text-content 和 margin border c $ c> body 。

This does not take into account the border of the box and margin of the body, whose defaults are 1px and 8px, respectively. This means that using 100vh will actually force the page to scroll. You can easily compensate by zeroing the border of .text-content and margin of body.

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

The only other option is to use a script to manipulate its height, which would also be backward compatible.

这篇关于如何使文本框的高度与窗口相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！