0
今天，我一直在玩一些scratch css和html。但是有一件事情讓我大失所望，就是我無法在網站上滾動，它只是不會讓我。我會爲您提供一個html和css。不能在網站上滾動
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="css/mystyle.css">
<html lang ="en"></html>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar">
<div class="navbarposition">
<div class="lists">
<a href="#" class="listo">Home<span></span></a>
<a href="#" class="listo">Contact<span></span></a>
<a href="#" class="listo">About<span></span></a>
<a href="#" class="listo">Blog<span></span></a>
</div>
</div>
</div>
<div class="banner">
<h1 class="headingbanner">Web Development</h1>
<a href=# class="btn">Read More</a>
</div>
<div class="offerings">
<h3 class="secondheader">My Services</h3>
<div class="jobnumber1">
<img class="cloudphoto" src="http://www.iconsdb.com/icons/preview/orange/cloud-3-xxl.pngf">
<h3 class="thirdheader">Web Development</h3>
<p class="pjob">I'm Fully able to build you a website that is going to handle the traffic.<br>Price: 300 USD <br></p>
</div>
</div>
<div class="randomquote">
</div>
</body>
那還有的CSS
@import url('https://fonts.googleapis.com/css?family=Encode+Sans');
body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: scroll;
}
.navbar{
background: #22264b;
height: 80px;
margin-top: -20px;
padding: 20px 10 10 20;
}
.navbarposition{
text-align: right;
margin: 20px;
margin-top: 20px;
}
.listo{
color: #e6cf8b;
text-decoration: none;
font-size: 25px;
margin: 20px;
font-family: 'Encode Sans', sans-serif;
}
.lists{
padding: 20px;
}
.listo:hover{
color: crimson;
}
.img-container{
text-align: center;
}
.banner{
text-align: center;
}
.content{
text-align: center;
}
.banner{
margin-top: -20px;
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background: url(https://i.stack.imgur.com/21f6K.jpg);
background-position: fixed;
background-size: cover;
}
.headingbanner{
color: white;
font-size: 120px;
margin-top: 140px;
font-family: 'Encode Sans', sans-serif;
opacity: 1;
z-index: 10;
}
.btn{
border: 2px solid white;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 25px;
font-family: 'Encode Sans', sans-serif;
border-radius: 5px;
opacity: 1;
z-index: 10;
}
.btn:hover{
background: white;
color:black;
}
.offerings{
margin-top: -20px;
width: 100%;
height: 400px;
position: fixed;
top: 600px;
background:#22264b;
background-position: fixed;
background-size: cover;
align-content: center;
}
.secondheader{
text-align: center;
font-size: 45px;
color:white;
font-family: 'Encode Sans', sans-serif;
}
.cloudphoto{
display: block;
margin: auto;
height: 120px;
}
.jobnumber1{
align-content: center;
}
.thirdheader{
font-family: 'Encode Sans', sans-serif;
color:white;
font-size: 25px;
text-align: center;
}
.pjob{
font-family: 'Encode Sans', sans-serif;
color:darkgoldenrod;
text-align: center;
font-size: 15px;
}
.randomquote{
margin-top: -20px;
width: 100%;
height: 200px;
top: 1000px;
position:fixed;
background:url(https://i.stack.imgur.com/S4bDF.jpg);
background-position: fixed;
background-size: cover;
align-content: center;
}
我真的很感激，如果有人會這麼好心通過代碼來看看，幫我找到調試這種方式。
這是因爲你戴上了'fixed'你的位置。 –
有沒有辦法獲得相同的結果沒有固定的位置設置？ –
如果我是你，我會停止圍繞這麼多邊緣擺弄，不要在任何一個持有者身上使用位置元素。 如果你想了解更多的職位，https://www.w3schools.com/css/css_positioning.asp –