html - 文本区域高度：100%

Question

这是我的小提琴：http: //jsfiddle.net/e6kCH/15/

听起来可能很愚蠢，但我找不到使文本区域高度等于 100% 的方法。它适用于宽度，但不适用于高度。

我希望文本区域根据窗口大小调整大小......就像它在我的小提琴中一样适用于宽度......

有任何想法吗？

Answer 1

元素的高度是相对于其父元素的。因此，如果您想将元素扩展到视口的整个高度，则需要将 CSS 应用到html以及body（父元素）：

html, body {
    height: 100%;
}

#textbox {
    width: 100%;
    height: 100%;
}

CSS3 的替代解决方案：如果您可以使用 CSS3，您可以使用视口百分比单位并将您的文本框直接缩放到视口的 100% 高度（和 100% 宽度）（此处为 jsfiddle）

body {
    margin: 0;
}
#textbox {
    width: 100vw;
    height: 100vh;
}