0
学校の割り当てのためにウェブサイトのホームページを作成していますが、ウェブページがスクロールせず、オフスクリーンのdivが表示されません。私はこのフォーラムと他の関連する質問に提案されたソリューションを勉強しているWebを閲覧しましたが、私のためにはうまくいかないようです。 私は以下のコードを書いています（私は関係のない部分を削除しました）...どうか、間違っていると教えてもらえますか？ ご協力いただきありがとうございます。ウェブページがスクロールしないため、オフスクリーンのdivが表示されない
*{margin: 0; box-sizing: border-box}
body {
height: 100vh;
overflow-y: scroll;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: relative;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 120px;
}
#ingredienti {
height: 300px;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Tomatoes</h1>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="selected">Ricette</a></li>
<li><a href="#">Categorie</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contatti</a></li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
<a href="#" class="selected">Starters</a>
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>salad</h2>
<img class="resize" src="...">
</div>
<div id="content">
<div id="ingredients">
<h3>Ingredients</h3>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="column">
<h4>Informazioni</h4>
</div>
<div class="column">
<h4>Categorie</h4>
</div>
<div class="column">
<h4>Mangiare fuori</h4>
</div>
<div id="bottom">
<h5>Newsletter</h5>
</div>
</div>
</footer>
</body>
</html>