1
私のウェブページでスクロールを無効にしたいのですが、自分のホームページにいるときにスクロールして空白を表示できます。私はなぜこれが起こるのかわからない、誰も助けてくれますか？事前に感謝します。ウェブページ下の空白を削除する方法
注：[実行]をクリックすると表示されます。
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}
body{
font-family: 'Fjalla One', sans-serif;
background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 60px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
line-height: 60px;
}
.title{
transform: rotate(-5deg);
margin: 0 auto;
display: block;
}
section {
width:500px;
margin:0 auto;
margin-bottom: 50px;
}
.search {
width: 300px;
height: 30px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
border-radius: 7px;
text-align: center;
color: white;
outline: none;
}
.btnsearch {
width: 50px;
height: 31px;
border-radius: 0px 7px 7px 0px;
position:relative;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
left: -10px;
}
.btnsearch:hover {
background-color:#fafafa;
color:#207cca;
}
.icon-div {
display: inline-block;
padding: 20px;
}
.icon {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
display: table-cell;
vertical-align: middle;
color: white;
border-radius: 35px;
width: 180px;
height: 180px;
text-align: center;
margin-bottom: 20px;
}
@media only screen and (max-width: 480px) {
td {
float: left;
margin-right:10px;
width: 45%;
}
td:nth-child(3) {
clear: left;
}
.icon{
width:100%!important;
height:100%!important;
margin-top: 50px;
}
}
.icon:hover, .icon:focus, .icon:active {
box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.icontext{
text-align: center;
color: white;
font-size: 30px;
}
.contactbtn{
margin-right: 15px;
color: white;
border: 2px solid black;
border-radius: 35px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
width: 100px;
height: 30px;
text-align: center;
justify-content: center;
margin-top: 50px;
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
background: #007991; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #78ffd6, #007991); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}<!--Title-->
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
<!--Zoekbalk-->
<section id="zoekbalk" align="center">
<input type="text" placeholder="Zoek iets op..." class="search"/>
<input type="button" value="Zoek" class="btnsearch"/>
</section>
<!--Icoontjes-->
<div style="text-align: center;">
<div class="icon-div" style="display: inline-block;">
<a href="afspraken.html">
<img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon"/>
</a>
<span class="icontext">Afspraken</span>
</div>
<div class="icon-div">
<img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon"/>
<span class="icontext">Situaties</span>
</div>
<div class="icon-div">
<img src="controlcenter.png" class="icon"/>
<span class="icontext">Grenzen</span>
</div>
<div class="icon-div">
<a href="../Categorie/Categorie.aspx"><img src="Multitaks.png" class="icon"/></a>
<span class="icontext">Categoriëen</span>
</div>
</div>
<!--Contact-->
<div style="text-align: center;">
<input type="button" value="contact" class="contactbtn"/>
</div>
ありがとう、ありがとう！ –
ようこそ@LucasVerhoest :-) – frnt