CSS:textarea的高度占视口高度的百分比_Css_Height

CSS:textarea的高度占视口高度的百分比

css

CSS:textarea的高度占视口高度的百分比,css,height,Css,Height,我想说，文本区域的高度等于视口高度的50%。我该怎么做？一个简单的高度：50%不起作用。我认为您需要以某种方式使用javascript来实现这一点。处理调整大小事件，并将文本区域设置为如此多的像素。如果设置display:block，则可以执行此操作。但在html 4.01 strict中，您必须定义列和行，但我认为您可以使用css覆盖它们。虽然我没有所有浏览器来测试这一点，但似乎大多数浏览器都接受简单地指定高度我在InternetExplorer7和Firefox3.0中对此进行了测试只需

我想说，文本区域的高度等于视口高度的50%。我该怎么做？一个简单的

高度：50%

不起作用。

我认为您需要以某种方式使用javascript来实现这一点。处理调整大小事件，并将文本区域设置为如此多的像素。

如果设置display:block，则可以执行此操作。但在html 4.01 strict中，您必须定义列和行，但我认为您可以使用css覆盖它们。

虽然我没有所有浏览器来测试这一点，但似乎大多数浏览器都接受简单地指定高度

我在InternetExplorer7和Firefox3.0中对此进行了测试

只需使用以下代码：

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

此处显示您的文本

你在使用什么浏览器时遇到了问题？

HTML和CSS在处理高度方面不太擅长。他们肯定更喜欢在自由流动的页面上垂直滚动。正如FryGuy所说，我认为JavaScript可能是您最完整的解决方案

一个简单的高度：50%不起作用

不，因为其父级没有明确的高度。那么50%是什么？父级表示“自动”，这意味着它基于子级内容的高度。这取决于父对象上的高度。啊！等等

所以你必须给它的父母一个百分比的高度。和父对象的父对象，一直到根对象。示例文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>


html，正文{边距：0；填充：0；}
html，正文，#神话，#神话文本区域{高度：100%；}
x

如果你不想在任何东西上都设置高度，另一种可能是使用绝对定位。这会将维度所基于的元素从直接父元素更改为具有“位置”设置（而不是默认的“静态”）的最近父元素。如果没有具有定位的祖先元素，则标注基于“初始包含块”，该块与视口的大小相同

最后，还有一个小问题，“100%”稍微过大，因为文本区域应用了额外的填充和边框。您可以通过以下方式解决此问题：

在95%左右妥协，或者
将文本区域上的填充和边框设置为0/none，或
使用“框大小：边框框；”更改“高度”的含义。这是一个CSS future soup功能，需要许多额外的特定于浏览器的重述（例如“-moz-box-sizing”）

当问到这个问题时，这可能并不存在，但CSS值和单位模块级别3包括。不过，似乎是这样。

尝试删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


这里是一个textarea
的小例子，它使用CSS3vh
来精确获取50%的视口高度
等于初始包含块高度的1%
因此，如果我们将textarea
的高度设置为50vh
，它将得到主体高度的一半：

html、正文、文本区{
框大小：边框框；
}
html，正文{
保证金：0；
身高：100%；
}
文本区{
高度：50vh；
}
谢谢你，伙计。我只是用JavaScript做的，效果很好。这可能是我见过的最模糊的答案，哈哈！另请参见。您可以尝试视口单位（CSS3）：