Я использую 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:
Возможно, проблема связана с сеткой-template-row, но я не уверен.
/* 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";
}
});
}