网站HTML / CSS底部不需要的空白

问题描述 投票：0回答：1

页面底部有多余的空白：

enter image description hereHTML代码：

<!doctype html>
<html lang="nl">
<head>
<style>
    ul{
      list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;
    }
    li{
        float: left;
    }
    li a{
        display: block;
        color: #3E3E3E;
        text-align: center;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 10px;
        padding-left: 10px;
        text-decoration: none;
    }
    li a:hover{
        background-color: #E9E9E9µ;
    }   
</style>
<meta charset="utf-8">
<title>(RED)</title>
<link href="(RED) css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
    <div class= "navigatie" id= "Back to top">
    <ul>
        <li><a class="active" href="#overOns">over ons</a></li>
        <li><a href="#methode">methode</a></li>
        <li><a href="#hoe helpen">hoe helpen</a></li>
        <li><a href="#oprichters">oprichters</a></li>
        <li><a href="#partners">partners</a></li>
        <li><a href="#contact">contact</a></li>
    </ul>
        </div>
</header>
    <div class= "logo">
        <img src="Foto's/RED LOGO.png" alt="logo van (RED)" style= "width: 195px">
    </div>
    <div class= "banner1">
      <div class= "banner"><img src="Foto's/ShopathonBannerImage_W3_FINAL.png" alt= "banner van (RED)" style= "width: 1920px;height: 450px"></div>
        <div class= "logoinBanner"><img src= "Foto's/RED-LOGO-white.png" alt= "logo van (RED) in kleur wit" style= "width: 10%"></div>
        <div class="shop">SHOP</div>
        <div class="save lives">SAVE LIVES</div>
    </div>
    <div class= "titelOverOns" ><h1 id= "overOns">OVER ONS</h1></div>
    <div class= "textOverOns"><p>Wij geloven in de kracht van 's werelds meest creatieve mensen die samenwerken om 
    diegenen te helpen die dit het meest nodig hebben. Wanneer een merk, een product of 
    dienst (RED) wordt, maken ze het u eenvoudig om ter plaatse programma's te 
    ondersteunen die miljoenen mensen helpen die 
    getroffen zijn door HIV / AIDS.</p></div>
    <div style="display: flex; justify-content: center">
        <img src= "Foto's/RED 3.jpg" class= "foto1" alt= "foto #bandtogether" style= "width: 500px">
    </div>
    <hr id= "line1" color="black" style= "width: 1450px">
    <div class= "methode"><h1 id= "methode">METHODE</h1></div>
    <div class= "p2+video">
      <div class= "textMethode"><p>We werken met veel verschillende bedrijven samen. Deze noemen we onze partners. De manier hoe we te werk gaan is dat we een deal sluiten met onze partners. Onze partner maakt dan een variatie van een bestaand product uit hun collectie, geeft het een rode kleur en noemt het product (RED). De prijs van het product blijft hetzelfde, maar 30% van de prijs gaat naar (RED). Het is een simpel concept, maar het red levens.</p></div>
      <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/3TKDCQCTuzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    <div>
      <hr id= "line2" color="black" style= "width: 1450px">
    </div>
    <div class= "hoe helpen">
      <div class= "hoeHelpen"><h1 id= "hoe helpen">HOE HELPEN</h1></div>
      <div class= "p3"><p>Er is een einde voor AIDS. Jij bent het.<br>

        Zoveel vooruitgang is gemaakt, maar er worden nog steeds drie mensen elke minuut met 
        een voorkomen virus geïnfecteerd.
        Veel van onze partners hebben een Product (RED). 30% van de winst van een Product 
        (RED) gaat naar het goede doel. Als u een Product (RED) koopt steunt u 
      ineens het goede doel.</p></div>
      <div class= "p4"><p>Of geef een donatie. Steun (RED) en weet dat 100% van uw gift ter plaatse naar Afrika 
        gaat.</p></div>
    </div>
    <div class= "donation">
            <div><img class= "donationLogo" src= "Foto's/Donate zwart.png" alt= "donation logo"></div>
            <div><a href= "https://www.red.org/donate-bankofamerica"><button class= "button" type="button">Doneer</button></a></div>
    </div>
    <div class= "logoOptions">
            <img class= "paypal" src= "Foto's/Paypal.png" alt= "logo PayPal" style= "width: 60px; height: 60px">
      <img class= "visa" src= "Foto's/Visa.png" alt= "logo Visa" style= "width: 60px; height: 60px">
      <img class= "mastercard" src= "Foto's/mastercard.png" alt= "logo MasterCard" style= "width: 60px; height: 60px">
        </div>
    <div class= "banner2">
            <img src= "Foto's/chrome_2fK6OQHKBv.png" alt= "banner with words 'Shop (RED) Save Lives'">
        </div>
    <div class= "oprichters" id= "oprichters">OPRICHTERS</div>
        <div class= "p5"><p>(RED) werd opgericht door Bono & Bobby Shriver met één doel in gedachte<br>
        Laten we <b>AIDS</b> beëindigen</p></div>
        <center><div class= "p6"><p>(RED) maakt gebruik van de kracht van mensen en bedrijven om aids te bestrijden. (RED) 
        werkt samen met de grootste iconische merken van de wereld die winst behalen uit de 
        verkoop van producten en ervaringen met (RED) aan het Wereldfonds.<br><br>

        Tot op heden hebben (RED) partners meer dan $600 miljoen gegenereerd voor het 
        Wereldfonds om AIDS, Tuberculose en Malaria te bestrijden, ter ondersteuning van HIV/
        AIDS-subsidies in Ghana, Kenia, Lesotho, Rwanda, Zuid-Afrika, eSwatini, Tanzania en 
        Zambia. 100% van dat geld gaat naar de grondwerken. Er wordt geen overhead genomen.
        </p></div></center>
        <div>
          <hr id= "line3" color="black" style= "width: 1450px">
        </div>
        <div class= "trotsePartners" id= "partners">TROTSE PARTNERS</div>
            <div class= "partners">
              <img class= "apple" src= "Foto's/Apple.png" alt= "foto van het logo van het bedrijf 'Apple'">
              <img class= "bankAmerica" src= "Foto's/Bankofamerica.png" alt= "foto van het logo van het bedrijf 'Bank of America'">
              <img class= "airasia" src= "Foto's/AirAsia2.png" alt= "foto van het logo van het bedrijf 'AirAsia'">
                <img class= "durex" src= "Foto's/Durex.png" alt= "foto van het logo van het bedrijf 'Durex'">
              <img class= "vespa" src= "Foto's/Vespa.png" alt= "foto van het logo van het bedrijf 'Vespa'">
              <img class= "alessi" src= "Foto's/alessi.png" alt= "foto van het logo vna het bedrijf 'Alessi'">
              <img class= "balmain" src= "Foto's/Balmain-Paris.png" alt= "foto van het logo van het bedrijf 'Balmain Paris'">
              <div class= "vele meer">en nog vele meer...</div>
            </div>
    <div class= "contact" id= "contact"></div>
        <div class= "rechthoekRood" style= "width: 1920px; height: 900px;"></div>
        <div class= "blijfVerbonden"><h1>BLIJF VERBONDEN</h1></div>
        <div class= "facebookLogo"><a href= "https://www.facebook.com/joinred/"><img src= "Foto's/Facebook niks white.png" alt= "logo van Facebook" style= "width: 5%"></a></div>
        <div class= "facebookText">joinred</div>
        <div class= "twitterLogo"><a href= "https://twitter.com/RED"><img src= "Foto's/Twitter white.png" alt= "logo van Twitter" style= "width: 5%"></a></div>
        <div class= "twitterText">@RED</div>
        <div class= "instagramLogo"><a href= "https://www.instagram.com/RED/"><img src= "Foto's/Instagram white.png" alt= "logo van Instagram" style= "width: 5%"></a></div>
        <div class= "instagramText">RED</div>
        <div class= "linkedinLogo"><a href= "https://www.linkedin.com/company/-red-/"><img src= "Foto's/LinkedIn white.png" alt= "logo van LinkedIn" style= "width: 5%"></a></div>
        <div class= "linkedinText">(RED)</div>
        <div class= "youtubeLogo"><a href= "https://www.youtube.com/user/joinred"><img src= "Foto's/Youtube white.png" alt= "logo van YouTube" style= "width: 5%"></a></div>
        <div class= "youtubeText">(RED)</div>
        <div class= "logoSmall"><img src= "Foto's/RED-LOGO-white.png" alt= "logo van (RED)" style= "width: 4%"></div>
        <div class= "logoProduct"><img src= "Foto's/Product-Red-white.png" alt= "logo van 'Product (RED)'" style= "width: 9.5%"></div>
    <div class= "top"><a href="#Back to top">Back to top</a></div>
</body>
</html>

CSS代码：

@charset "utf-8";
/* CSS Document */

html, body{
    background-color: white;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}   

html{
    scroll-behavior: smooth;
}

h1{
    font-family: "SecondaRoundW00-Bold";
    font-size: 50px;
}

p{
    font-family: "SecondaRoundW00-Regular";
    font-size: 24px;
}

.logo{
    position: relative;
    display: block;
    margin-left: 42.7%;
    bottom: -104px;
    margin-bottom: 11%;
}

.navigatie{
    font-family: "SecondaRoundW00-Regular";
    float: right;
}

.banner{
    position: relative;
}

.shop{
    font-family: "Tolyer Regular no.1";
    position: relative;
    bottom: 445px;
    margin-left: 23.5%;
    font-size: 150px;
    color: white;
}

.logoinBanner{
    position: relative;
    bottom: 300px;
    left: 39%;
}

.save{
    font-family: "Tolyer Regular no.1";
    position: relative;
    bottom: 615px;
    margin-left: 52%;
    font-size: 150px;
    color: white;
}

.textbanner{
    font-weight:bold;
    font-family: "Tolyer Regular no.1";
    text-align: center;
    font-size: 80px;
    color:#000;
    position: relative;
    top: 250px;
}

.titelOverOns{
    position: relative;
    bottom: 450px;
    margin-left: 11.7%;
}

.textOverOns{
    position: relative;
    width: 76%;
    margin-left: 12%;
    bottom: 445px;
}

.foto1{
    position: relative;
    bottom: 375px;
}

#line1{
    position: relative;
    border-radius: 5px;
    bottom: 300px;
}

#line2{
    position: relative;
    border-radius: 5px;
    bottom: 185px;
}

#line3{
    border-radius: 5px;
    margin-top: 5%;
    margin-bottom: 2%;
}

.methode{
    position: relative;
    margin-left: 75.1%;
    bottom: 270px;
}

.p2+video{
    display: flex;
    flex-wrap: wrap;
}

.textMethode{
    position: relative;
    text-align: right;
    width: 52%;
    margin-left: 36.1%;
    bottom: 265px;
}

.video{
    overflow: hidden;
    margin-left: 15%;
    position: relative;
    bottom: 270px;
}

.hoeHelpen{
    position: relative;
    margin-left: 11.7%;
    bottom: 140px;;
}

.p3{
    margin-left: 11.7%;
    width: 76%;
    position: relative;
    bottom: 130px;
}

.p4{
    position: relative;
    bottom: 110px;
    margin-left: 11.7%;
}

.donationLogo{
    width: 4.2%;
    margin-left: 39.3%;
    position: relative;
    bottom: 30px;
}

.button {
    background-color: #AB1E2E;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 18px;
    font-family: "SecondaRoundW00-Regular";
    cursor: pointer;
    margin-bottom: 3.8%;
    margin-left: 45%;
    position: relative;
    bottom: 95px;
    width: 190px;
    height: 60px;
}

.button:hover {
  background-color: #E05162;
}

.paypal{
    position: relative;
    margin-left: 44.3%;
    bottom: 145px;
    padding-right: 7px;
}

.visa{
    position: relative;
    bottom: 145px;
    padding-left: 7px;
    padding-right: 7px;
}

.mastercard{
    position: relative;
    bottom: 145px;
    padding-left: 7px;
}

.banner2{
    position: relative;
    bottom: 70px;
}

.oprichters{
    position: relative;
    text-align: center;
    font-family: "SecondaRoundW00-Bold";
    font-size: 50px;
}

.p5{
    position: relative;
    text-align: center;
    font-family: "SecondaRoundW00-Regular";
    font-size: 30px;
    margin-top: 2%;
    color: #AB1E2E;
}

.p6{
    position: relative;
    text-align: left;
    font-family: "SecondaRoundW00-Regular";
    font-size: 24px;
    margin-top: 2%;
    width: 50%;
    margin-bottom: 2%;
}

.trotsePartners{
    position: relative;
    text-align: center;
    font-family: "SecondaRoundW00-Bold";
    font-size: 50px;
    margin-top: 4.5%;
}

.apple{
    position: relative;
    margin-left: 22.5%;
    margin-top: 2%;
}

.bankAmerica{
    position: relative;
}

.airasia{
    position: relative;
    margin-left: 22.5%;
}

.vespa{
    position: relative;
    margin-left: 9.5%;
    bottom: 120px;
    left: 5%;
}

.alessi{
    position: relative;
    bottom: 120px;
}

.balmain{
    position: relative;
    bottom: 120px;
    right: 5%;
}

.vele{
    position: relative;
    font-family: "SecondaRoundW00-Regular";
    font-size: 20px;
    margin-left: 68.8%;
    bottom: 225px;
}

.rechthoekRood{
    position: relative;
    background-color: #AB1E2E;
    bottom: 100px;
}

.blijfVerbonden{
    position: relative;
    bottom: 1000px;
    color: white;
    text-align: center;
}

.facebookLogo{
    position: relative;
    bottom: 950px;
    margin-left: 43%;
}

.twitterLogo{
    position: relative;
    bottom: 920px;
    margin-left: 43%;
}

.instagramLogo{
    position: relative;
    bottom: 890px;
    margin-left: 43%;
}

.linkedinLogo{
    position: relative;
    bottom: 860px;
    margin-left: 43%;
}

.youtubeLogo{
    position: relative;
    bottom: 810px;
    margin-left: 43%;
}

.facebookText{
    font-family: "SecondaRoundW00-Regular";
    font-size: 32px;
    position: relative;
    bottom: 1000px;
    margin-left: 49%;
    color: white;
}

.twitterText{
    font-family: "SecondaRoundW00-Regular";
    font-size: 32px;
    position: relative;
    bottom: 970px;
    margin-left: 49%;
    color: white;
}

.instagramText{
    font-family: "SecondaRoundW00-Regular";
    font-size: 32px;
    position: relative;
    bottom: 942px;
    margin-left: 49%;
    color: white;
}

.linkedinText{
    font-family: "SecondaRoundW00-Regular";
    font-size: 32px;
    position: relative;
    bottom: 905px;
    margin-left: 49%;
    color: white;
}

.youtubeText{
    font-family: "SecondaRoundW00-Regular";
    font-size: 32px;
    position: relative;
    bottom: 862px;
    margin-left: 49%;
    color: white;
}

.logoSmall{
    position: relative;
    bottom: 800px;
    margin-left: 1.5%;
}

.logoProduct{
    position: relative;
    bottom: 857px;
    margin-left: 7%;
}

.top{
    position: relative;
    bottom: 875px;
    font-family: "SecondaRoundW00-Regular";
    font-size: 24px;
    float: right;
    margin-right: 1%;
}

a{
    text-decoration: none;
    color: white;
}

a:hover{
    color:#C0C0C0;
}

我是html / css的新学生，如果代码不完美，请原谅。我试图找到一种解决方案，但似乎无法摆脱它。是否因为位置：“相对”？

html css whitespace
1个回答
0
投票
html, body{
    background-color: white;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; //remove this if possible
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.