微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS:文本区域的高度,占视口高度的百分比

我想说一个文本区域的高度等于视口高度的50%.我怎样才能做到这一点?一个简单的高度:50%没有办法.

解决方法

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

不,因为它的父级没有明确的高度.那么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>

另一种可能性,如果你不想设置高度在一切都是使用绝对定位.这会将基于直接父元素的元素更改为最接近的祖先,而’position’设置不是认’static’.如果没有定位的祖先元素,则尺寸基于与视口大小相同的“初始包含块”.

最后,有一个微不足道的问题是’100%’稍微过大,因为文字区域附加了一些填充和边框.你可以解决这个问题:

>妥协在95%,或>在文本区域设置填充和边框为0 / none,或>使用“Box-sizing:border-Box”来改变“height”的含义.这是一个CSS未来的汤功能,需要许多额外的浏览器特定重述(如“-moz-Box-sizing”).

原文地址:https://www.jb51.cc/css/216571.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。