CSS栅格不会填充整个视口
CSS栅格不会填充整个视口
提问于 2018-08-14 07:25:50
我是新手使用CSS网格。我已经布置了一个简单的页面，其中包含一个网格布局和三个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;
}要消除滚动条并使栅格填充整个视口，我还需要做什么？
谢谢你在这方面的帮助。
回答 1
Stack Overflow用户
发布于 2018-08-14 08:07:27
基于jhpratt上面的评论，这里是这个问题的解决方案。将正文css代码更改为：
body{
background-color: black;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}将页边距添加到正文中解决了问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831827
复制相关文章
相似问题
腾讯云开发者
