css - CSS Grid 不会填满整个视口
问题描述
我是使用 CSS Grid 的新手。我已经布置了一个带有网格布局和三个 div 的简单页面。我将网格(参见 css 代码中的“.grid”类)设置为 100vh 和 100vw,但是当我在 Firefox(版本 56)中查看它时,它会将垂直和水平滚动条放在右侧和底部,并且网格事实上,并没有填满整个视图屏幕。
这是html代码:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Welcome to Project</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="site">
<div class="grid">
<!-- ______________ -->
<div class="a">
<div class="a_left">
<div>Logo for Project</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
</div>
<!-- ______________ -->
<div class="b">This is grid-template-row b</div>
<div class="c">This is grid-template-row c</div>
</div>
<!-- ______________ -->
</body>
</html>
这是css代码:
.grid {
display: grid;
grid-template-rows: 10% 35% 55%;
width: 100vw;
height: 100vh;
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
}
.a{
display: grid;
font-family: sans-serif;
color: green;
font-size: 16pt;
}
.a_left{
display: flex;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: space-between;
}
.a_right{
display: flex;
height: 100%;
flex-wrap: nowrap;
justify-content: right;
vertical-align: right;
}
.b{
display: grid;
font-family: sans-serif;
color: blue;
font-size: 16pt;
}
.c{
display: grid;
font-family: sans-serif;
color: black;
font-size: 16pt;
}
li {
display: inline;
}
site-nav{
margin-top: 0px;
}
.topnav {
align-content: right;
justify-content: center;
overflow: hidden;
background-color: #333;
height: 100%
}
.topnav a {
float: left;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.site{
max-width: none;
display: grid;
}
我还需要做什么来消除滚动条并让网格填充整个视口?
感谢您对此的任何帮助。
解决方案
根据 jhpratt 的上述评论,这里是问题的解决方案。将正文 css 代码更改为:
body{
background-color: black;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
在正文中添加边距解决了这个问题。
推荐阅读
- vb.net - DataGridView.RowEnter 事件中的 Task.WaitAll() 导致 DataError
- typescript - 错误 TS2322:类型“字符串”不可分配给类型“Ex1”
- google-cloud-platform - 我们可以只从云功能触发一次数据流作业吗?
- c# - 发布字符串而不是数组时,模型绑定返回 null
- node.js - nodejs上的socket.io - 套接字离开空间不起作用
- android - 存储访问框架 - 文件夹中的文件操作产生的事件
- ios - iOS 13.x 上的 CoreData NSExpression "max:" 函数行为
- reactjs - 使用 React 和 AspnetCore 下载大文件以打开浏览器保存(标题)
- javascript - 当我需要在 url 中使用参数时如何从数据库中获取数据?
- java - 在 Java Struts Web 应用程序中使用 JSch 文件上传损坏