Ich möchte das Scrollen auf meiner Webseite deaktivieren, aber wenn ich auf meiner Homepage bin, kann ich ein wenig scrollen, wodurch einige Leerräume sichtbar werden. Ich weiß nicht warum das passiert, kann mir bitte jemand helfen? Danke im Voraus.
Hinweis: Sie können es sehen und ausprobieren, wenn Sie auf „Ausführen“ klicken.
@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>margin:0 zu html und body.
html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
margin:0; /*Add this*/
}
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen