我在第一个网站上使用CSS Grid，并且已经开始添加内容，但是我无法向下滚动，并且内容就不在页面上了。我试图更改视图高度，但似乎无法修复。谁能看一下我的代码并帮助我解决此问题，
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Student Hacks</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="grid">
<header>
<img class="logo" href="index.html" src="img/student-hacks-logo.png" alt="Logo">
</header>
<div class="menu" id="menu-toggle"></div>
<nav id="menu-nav">
<a class="home" href="index.html">HOME</a>
<a class="money" href="money.html">MONEY</a>
<a class="study" href="study.html">STUDY</a>
<a class="faqs" href="faqs.html">FAQs</a>
</nav>
<main>
<div class="container">
<img src="img/students.jpg" alt="image ofstudents">
<div class="text">Welcome To Student Hacks</div>
</div>
<hr class="index-hr-1">
<h2 class="heading">Who Are We?</h2>
<p class="about-us-text">Student Hacks is a site based towards students
looking for quick tips and tricks to make their
student lives easier. We provide money tips, as
well as revision tips.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</main>
<footer class="footer">
<p class="footer-writing">Student Hacks 2018©</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
css：
使用grid-template-rows可能是个问题，但我不确定。
/* MOBILE AND GLOBAL STYLES */
/* applies to screens smaller than 500px (first
breakpoint) */
/* and above unless overwritten below */
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Courier New", Courier, monospace;
font-weight: normal;
font-size: 1rem;
color: black;
}
html {
margin: 0;
padding: 0;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 10vh 12vh 75vh 5vh;
grid-template-areas:
"header"
"menu"
"content"
"footer";
}
header {
grid-area: header;
background: #e5e5e5;
}
.logo {
width: 350px;
height: 90px;
margin: auto;
display: block;
}
nav {
grid-area: menu;
justify-content: center;
flex-direction: row;
height: 12vh;
}
nav a {
padding: 0;
color: black;
background: #bfbfbf;
text-decoration: none;
transition: all 0.5s;
width: 100%;
text-align: center;
float: right;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.menu {
background: #555;
text-align: center;
color: #fff;
line-height: 2em;
}
.menu-toggle {
display: flex;
}
.home {
height: 3vh;
}
.money {
height: 3vh;
}
.study {
height: 3vh;
}
.faqs {
height: 3vh;
}
main {
grid-area: content;
/* increasing the height of one element increases
all row heights */
/*height: 25vh;*/
background-color: #e5e5e5;
}
.container img {
width: 100%;
height: 200px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
footer {
grid-area: footer;
background: #e5e5e5;
}
.footer-writing {
text-align: center;
}
.accordion {
background-color: #94FCDD;
color: black;
font-weight: bold;
font-family: "Courier New", Courier, monospace;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #399A7C;
}
.accordion:after {
content: '\002B';
color: black;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
}
.heading {
text-align: center;
font-size: 3rem;
}
.faq-hr-1 {
/* border: dashed 1.5px;
width: 35%;
margin-bottom: 75px;
margin-top: 35px; */
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.index-hr-1 {
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 12px 12px -10px #8c8b8b inset;
}
.about-us-text {
text-align: center;
font-size: 1.2rem;
margin-left: 30px;
margin-right: 30px;
}
/* TABLET STYLES */
@media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 17vh 3vh 75vh 5vh;
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
nav {
display: flex;
flex-direction: row;
line-height: 1.5em;
}
/* just change the menu colours on hover above
mobile widths */
nav a:hover {
color: #dfd;
background: #7d8687;
}
.logo {
width: 500px;
height: 150px;
}
.container img {
width: 100%;
height: 400px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
}
/* DESKTOP STYLES */
@media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 17vh 3vh 75vh 5vh;
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
.container img {
width: 100%;
height: 500px;
}
.text {
top: 50%;
}
}
JavaScript：
//JS for accordion on faq's page
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}