gpt4 book ai didi

CSS:文本区域的高度占视口(viewport)高度的百分比

转载 作者:技术小花猫 更新时间:2023-10-29 10:23:40 25 4
gpt4 key购买 nike

我想说文本区域的高度等于视口(viewport)高度的 50%。我怎样才能做到这一点?一个简单的 height: 50% 并不能解决问题。

最佳答案

A simple height: 50% doesn't do the trick.

不,因为它的父级没有明确的高度。那么50%是什么? parent 说“自动”,这意味着它基于子内容的高度。这取决于 parent 的高度。啊!等

所以你必须给它的父级一个百分比高度。以及 parent 的 parent ,一直到根。示例文档:

<!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>

如果您不想在所有内容上都设置高度,另一种可能性是使用绝对定位。这会将维度所基于的元素从直接父级更改为具有“位置”设置而不是默认“静态”的最近祖先。如果没有定位的祖先元素,则尺寸基于与视口(viewport)大小相同的“初始包含 block ”。

最后,由于对文本区域应用了额外的填充和边框,“100%”有点太大了。您可以通过以下方式解决此问题:

  • 在 95% 之类的事情上妥协,或者
  • 将文本区域的填充和边框设置为 0/无,或者
  • 使用“box-sizing: border-box;”改变“高度”的含义。这是一个 CSS future 汤功能,需要许多额外的特定于浏览器的重述(例如“-moz-box-sizing”)。

关于CSS:文本区域的高度占视口(viewport)高度的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/632983/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com