meine Fußzeile bleibt nicht am Ende der Website, wenn ich die Website verkleinern

Question

Pls helfen mir, ich mache eine Website und meine Fußzeile bleibt nicht an der Unterseite, wenn ich die Website verkleinern. Ich bin ein Anfänger, also kann der Code ein wenig unordentlich sein.

as you can see, the footer doesn't stay at the bottom, I have searched here for people with a similar problem with the code and I found some. And I tried some of the solutions, but none of them worked for me.

Ich denke, es ist nicht, weil funktioniert es etwas anderes falsch mit meinem CSS, aber ich es einfach nicht herausfinden.

html{ 
 
box-sizing:border-box; 
 
-ms-text-size-adjust:100%; 
 
-webkit-text-size-adjust:100%; 
 
} 
 

 
*,*:before,*:after{ 
 
    box-sizing:inherit 
 
} 
 

 
body{ 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
    background-color: #f6f6f6; 
 
} 
 

 
ul { 
 
     padding: 4px 8px; 
 
     float: right; 
 
} 
 

 
a.nav-button { 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    color: black; 
 
    letter-spacing: 4px; 
 
    border: none; 
 
    outline: none; 
 
    font-family: Verdana,sans-serif; 
 
    font-size: 15px; 
 
    line-height: 1.5; 
 
} 
 

 
a.nav-button:hover { 
 
    background-color: #cccccc; 
 
} 
 

 
img.logo{ 
 
    padding-top: 14px; 
 
    height: 50px; 
 
    float:left; 
 
} 
 

 
div.menu{ 
 
    position:fixed; 
 
    width:100%; 
 
    z-index:1; 
 
    background-color: #ffffff; 
 
} 
 

 
div.front_img{ 
 
    padding-top:500; 
 
    vertical-align: middle; 
 
    display:inline-block; 
 
    max-width:100%; 
 
    width: 100%; 
 
    max-height: 60%; 
 
    position: relative; 
 
    background-image: url(../images/front_image.jpg); 
 
    background-size: cover; 
 
    left:50%; 
 
    top:0; 
 
    transform:translate(-50%,0%); 
 
    -ms-transform:translate(-50%,0%); 
 
} 
 

 
div.webpage { 
 
    max-width:980px; 
 
    margin:auto; 
 
} 
 

 
div.container { 
 
    padding:0.01em 16px; 
 
    padding-top:32px; 
 
    padding-bottom: 32px; 
 
    max-width: 100%; 
 
    position: relative; 
 
    left:50%; 
 
    top:0; 
 
    transform:translate(-50%,0%); 
 
    -ms-transform:translate(-50%,0%); 
 
    background-color: #f6f6f6; 
 
} 
 

 
div.article { 
 
    padding:0.01em 16px; 
 
    padding-top:32px; 
 
    padding-bottom: 32px; 
 
    max-width: 100%; 
 
    position: relative; 
 
    left:50%; 
 
    top:0; 
 
    transform:translate(-50%,0%); 
 
    -ms-transform:translate(-50%,0%); 
 
    background-color: #f6f6f6; 
 
} 
 

 
div.h3-container { 
 
    border-bottom:1px solid #ccc; 
 
    width:100%; 
 
} 
 

 
h3 { 
 
    font-size: 24px; 
 
    font-family: "Segoe UI",Arial,sans-serif; 
 
    font-weight: 400; 
 
    margin: 10px 0; 
 
} 
 

 
p { 
 
    font-family: Verdana,sans-serif; 
 
    font-size: 15px; 
 
    line-height: 1.5; 
 
    display: block; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
} 
 

 
div.footer { 
 
    position: relative; 
 
    padding-top: 6; 
 
    padding-bottom: 6; 
 
    padding-right: 8; 
 
    width: 100%; 
 
    text-align: right; 
 
    background-color: black; 
 
    color: goldenrod; 
 
} 
 

 
div.footer, a{ 
 
    color: goldenrod; 
 
} 
 

 
div.footer-container { 
 
    position: relative; 
 
    padding:0.01em 16px; 
 
    padding-top:32px; 
 
    padding-bottom: 32px; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    background-color: black; 
 
    color:goldenrod; 
 
    left:50%; 
 
    top:0; 
 
    transform:translate(-50%,0%); 
 
    -ms-transform:translate(-50%,0%); 
 
    border-bottom:1px solid goldenrod; 
 
} 
 

 
div.footer-background{ 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
    
 
div.leverancier-wrap { 
 
    padding-left: 22; 
 
    background-color: white; 
 
} 
 

 
div.footer-content { 
 
    // tried position:fixed; here but didnt work :c 
 
} 
 
    
 
HTML

<div class="footer-content"> 
 
    <div class="container" style="max-width:1564px"> 
 
     <div class="h3-container" id="intoduction"> 
 
      <h3 class="Welcome-title"><img src="images/location_icon.png" height="30" length="20" hspace="20"/>Installatietechniek Haaglanden bevindt zich hier.</h3> 
 
     </div> 
 
    </div> 
 
    <style> 
 
    #map { 
 
     width: 100%; 
 
     height: 400px; 
 
     background-color: grey; 
 
     border-bottom: 5pt solid black; 
 
    } 
 
    </style> 
 
    <div id="map"></div> 
 
     <script> 
 
      function initMap() { 
 
      var uluru = {lat: 52.0442081, lng: 4.3370828}; 
 
      var map = new google.maps.Map(document.getElementById('map'), { 
 
       zoom: 17, 
 
       center: uluru 
 
      }); 
 
      var marker = new google.maps.Marker({ 
 
       position: uluru, 
 
       map: map 
 
      }); 
 
      } 
 
     </script> 
 
     <script async defer 
 
     src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&callback=initMap"> 
 
     </script> 
 

 
    <div class="leverancier-wrap"> 
 
     <img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg" height="30" width="300"> 
 
     <img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg" height="30" width="300"> 
 
     <img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg" height="30" width="300"> 
 
     <img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg" height="30" width="300"> 
 
    </div> 
 
     <div class="footer-background"> 
 
      <div class="footer-container" style="max-width:1564px"> 
 
       <div class="footer-text"> 
 
        <h3>Contactgegevens</h3> 
 
        <p>Installatietechniek Haaglanden<span style="display:inline-block; width: 280px;"><img src="images/telphone-icon.png" height="16" length="8" hspace="259"/></span>070 7620180</p> 
 
        <p>Burgemeester Elsenlaan 321<span style="display:inline-block; width: 297px;"><img src="images/mail-icon.png" height="16" length="8" hspace="276"/></span>info@installatietechniekhaaglanden.nl</p> 
 
        <p>2282 MZ Rijswijk<a href="https://www.facebook.com/installatietechniekhaaglanden/"><img src="images/facebook-icon.png" height="16" length="8" hspace="362"/></a></p> 
 
       </div>  
 
      </div> 
 
     </div> 
 
    <div class="footer"> 
 
     <p>Copyright © installatietechniekhaaglanden.nl. Designed by <a href="">ajeeth</a></p> 
 
    </div> 
 
</div>

Answer 1

Geben position: fixed; und es am Boden zu fixieren, selbst wenn der Inhalt wie die unten Demo wenig

body { 
 
    margin: 0; 
 
} 
 

 
div.footer-content { 
 
    background: red; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
HTML

<div class="footer-content"> 
 
    this is the footer 
 
</div>

Answer 2

Sie meinen, eine Sticky Footer ? in der CSS ändern

.footer-content { position: absolute; bottom: 0; width: 100%; }