下面有一个 css 和 html 代码
.overlay_ {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
}
html
<body> <div class="overlay_"></div> </body>
问题是当我调整窗口大小时，覆盖层不会占据全屏。尽管调整了窗口高度，我仍需要它全屏显示。
最佳答案
新的修改答案
将其添加到您的 CSS 中:
.overlay_ {
position: fixed;
top: 0;
left: 0;
}
fixed 使元素保持在原来的位置，即使文档滚动!
if this help you, please upvote for help more people
之前的回答...
我将此 CSS 添加到您的代码中:
body {
margin: 0;
}
.overlay_ {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
top: 0;
left: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overlay_"></div>
</body>
</html>body {
margin: 0;
}
之前
之后
body {
margin: 0;
}
.overlay_ {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overlay_"></div>
</body>
</html>关于html - 窗口高度调整大小后覆盖不全屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70445607/