CSS Grid没有填满整个视口[重复]
Posted
技术标签:
【中文标题】CSS Grid没有填满整个视口[重复]【英文标题】：CSS Grid does not fill entire viewport [duplicate] 【发布时间】：2019-01-20 17:52:06 【问题描述】：我是使用 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;
我还需要做什么来消除滚动条并让网格填满整个视口？
感谢您对此的任何帮助。
【问题讨论】：
首先，你为什么还在用FF56？无论如何，你清除了身体的边缘吗？ 感谢您的评论。这在 FF56 上应该没有什么不同。你说的“清除身体上的边缘”是什么意思？ 不，我只是好奇你为什么使用旧版本。我的意思是将边距设置为 0。默认情况下，有一些数量（我认为默认情况下为 10px） 在哪个类中设置边距为0？ .site 还是 .grid 类？谢谢。 身体。你还没有表明你正在这样做，并且有一个默认边距。 【参考方案1】：基于上面来自 jhpratt 的 cmets，这里是问题的解决方案。将正文 css 代码更改为：
body
background-color: black;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
向正文添加边距解决了这个问题。
【讨论】：
你应该已经在 cmets 中回答了我的问题，让我有机会回答你的问题。 为什么投反对票？这就回答了这个问题。 我这样做是因为我无法正确格式化 cmets 中的代码。 不确定你是否理解。由于没有回答我关于您是否已经拥有此 CSS 的问题，您使我无法正确回答问题。 对不起，我想我不知道这点礼仪。非常感谢您对此的帮助。它解决了这个问题。但是，如果您发布答案，我会选择它作为最佳答案。以上是关于CSS Grid没有填满整个视口[重复]的主要内容，如果未能解决你的问题，请参考以下文章
在css-grid中使用align-items时使单元格内容填充整个单元格区域[重复]
即使父元素的高度设置为“100vh”，子元素也不包含在视口高度中[重复]