热搜：编程 Python Microsoft 编程语言 C++

css 获取浏览器可视窗口的宽度与高度的方法

发布时间：2023-07-02 19:30:35 来源：互联网

.

我赞美你品格高尚，崇敬你洁白无瑕。我爱你、想你、盼你，像对每一个季节那样。我爱你、想你、盼你，不管世俗的偏见怎样厉害。冬――四季之一的冬，你来吧！我喜欢你纯净的身躯，喜欢你严厉的性格，我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花，夏天的麦浪，秋天的瓜果……比美！

在web页面中，如果想设置一个div元素的高度与高度等于浏览器可视窗口的宽度与高度的话一般都是要借助js脚本来进行设置，除了js脚本外css样式代码中也提供了一个好的方法。

css 获取浏览器窗口的宽度与高度的方法

在桌面端(这里不涉及移动端)，浏览器的可视区域也被称为“视口“，而它的宽度与高度也有相应的单位来表示，分别为"vw"与"vh"。

vw：表示视口的宽度，1vw表示视口宽度的 1%;

vh：表示视口的高度，1vh表示视口高度的 1%;

示例1：

定义一个元素，其宽度与高度和浏览器可视区域相同！

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width:50vw;
            height: 50vh;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        我的宽度与高度与浏览器可视窗口的宽度与高度一致！
        <p>！</p>
    </div>
</body>
</html>

示例2：

定义一个元素，其宽度与高度为浏览器可视区域宽与高的50%！

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width:50vw;
            height: 50vh;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        我的宽度与高度是浏览器可视窗口宽度与高度的50%！
        <p>！</p>
    </div>
</body>
</html>