html - 网格容器的意外滚动
问题描述
即使我的网格容器设置为 (100vh, 100vw),网格的内容仍然溢出。
奇怪的是,当我打开页面时,它有滚动条和滚动条,但是当我调整窗口大小并再次将其放回全屏时(意味着屏幕大小相同),滚动条消失了!
我真的不知道是什么原因造成的,所以任何帮助将不胜感激。
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 7.5fr 7.5fr 2fr 1fr;
/* overflow: hidden; */
}
.navbar {
background: pink;
grid-row: 1/2;
grid-column: 1/3;
}
.webcam {
background: green;
grid-column: 1/2;
grid-row: 2/3;
}
.chat {
background: blue;
grid-column: 1/2;
grid-row: 3/4;
}
.two-buttons {
background: brown;
grid-column: 1/2;
grid-row: 4/6;
}
.screen {
background: black;
grid-column: 2/3;
grid-row: 2/4;
}
.bunch-of-buttons {
background: red;
grid-column: 2/3;
grid-row: 4/5;
}
.chat-send-button {
background: yellow;
grid-column: 2/3;
grid-row: 5/6;
}
<!DOCTYPE html>
<html>
<head>
<title>Focus</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
asdf
</div>
<div class="webcam">
asdf
</div>
<div class="chat">
asdf
</div>
<div class="two-buttons">
asdf
</div>
<div class="screen">
asdf
</div>
<div class="bunch-of-buttons">
asdf
</div>
<div class="chat-send-button">
asdf
</div>
</div>
</body>
</html>
编辑:我的显示器是 1280*1024。
解决方案
推荐阅读
- css - 使用 flex 对齐 SVG
- amazon-web-services - 静态 S3 网站端点未通过 HTTPS 重定向
- php - Laravel For Each Loop in Has Many 只返回一条记录
- java - JavaFX Stage 总是显示空场景
- prolog - 合并两个有序列表 ProLog
- eclipse - Eclipse 远程应用程序调试不使用指定的登录 shell
- c++ - 错误:C2679 二进制“==”:未找到采用“const std::string”类型的右侧操作数的运算符(或没有可接受的转换
- r - 在目标函数中使用 rootsolver 的解
- python - 从文件读取输入时排除 \n
- python - 每次将模型保存在 Django 上时,如何为模型的属性设置特定值?