Footer wird nicht nach unten gehen, über den Inhalt zeigt

Question

https://jsfiddle.net/z4of8fvy/

ich meinen Code wissen etwas schlampig ist, aber ich bin immer noch lernen. Ich habe es durch einen Validator laufen lassen, um zu sehen, ob ich einen vermisst habe, aber ich habe keinen gefunden. Jede Hilfe wäre willkommen.

Wenn es noch andere Dinge gibt, auf die Sie hinweisen können, würde ich das auch zu schätzen wissen. Es fragt mich nach weiteren Details, aber ich weiß nicht, was ich sonst noch sagen kann. Ich weiß, dass die Fußzeile an einem Punkt mit mir zusammen arbeitete, um ihre Position zu halten: sticky und bottom: 0, aber als ich mehr Inhalt hinzufügte, erschien das Problem. Damals habe ich versucht, etwas damit zu spielen und es wahrscheinlich noch mehr ruiniert.

<div id="topBar" class="container-fluid"> 
    <div class="row"> 
     <div id="logo" class="col-xs-6"> 
      <a id="homelink" href="https://smithstreetmediagroup.com"> 
      <h1>SMG <br> Studios </h1> 
      </a> 
     </div> 
     <div id= "menu" class = "col-xs-6"> 
      <a class="topBar" href="mess.html"><h4>Me$$ aka M.T.M </h4></a> 
      <a class="topBar" href="services.html"><h4>Services </h4></a> 
      <a class="topBar" href="campaigns.html"><h4>Campaigns </h4></a> 
      <a class="topBar" href="jeybundy.html"><h4>Jey Bundy </h4></a> 
      <a class="topBar" href="store.html"><h4>Store </h4></a> 
      <a class="topBar" href="contact.html"><h4>Contact </h4></a> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
     <div id="studioHome" class = "col-xs-4 mainOne"> 
      <h1> Studio Services </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
     <div id="jbHome" class = "col-xs-4 mainOne"> 
      <h1> Jey Bundy </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
     <div id="mtmHome" class = "col-xs-4 mainOne"> 
      <h1> Me$$ aka M.T.M </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
    </div> 
</div> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6 mainTwo"> 
      <h1>Our Mission</h1> 
      <p> 
       Smith media groups consist of a team of polite professionals that provide high quality and affordable service. We consider our customers family so we take pride in making our customers feel as comfortable and satisfied as possible. We offer a vast variety of services such as photoshoots, music videos, parties, wedding videos/photos, real estate photos, music production & duplication, ect. If you have any questions give us a call or use our contact form and we will give you a call. Our Vison, Your Success</p> 
     </div> 
     <div class="col-xs-6 mainTwo"> 

      <iframe width="560" height="315" src="https://www.youtube.com/embed/5iSNm5c6dBs?rel=0" frameborder="0" ></iframe> 

     </div> 

    </div> 
</div> 
<div class="container"> 
    <div class = "row"> 
     <div class = "col-xs-12"> 
      <div id="slideshow"> 
       <div class="slideImg"> 
        <img src="battleflyer.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="bluesmoke.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="streetview.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="trackboard.jpg" /> 
       </div> 
      </div> 
</div>  
    </div> 
</div> 
<footer> 
    <div class = "container-fluid"> 
     <div class = "row" id="bottomBar"> 
      <div class = "col-xs-4"> 

       <a href="https://www.facebook.com/smithstreetmediagroup/"> <i class="fa fa-facebook-official" aria-hidden="true"> Facebook</i></a> 
       <a href="https://www.instagram.com/smithmediagroup/?hl=en"><i class="fa fa-instagram" aria-hidden="true"> Instagram</i></a> 



      </div> 
      <div class = "col-xs-4"> 

      </div> 
      <div id="designer" class = "col-xs-4"> 
      <h6>Designed by Xavier Velez</h6> 
      </div> 
     </div> 
    </div> 

</footer> 

Answer 1

Es ist eigentlich in diesen Tagen sehr einfach. Eine Codezeile.

min-height: 100vh;

https://codepen.io/rhroyston/pen/gXXMmr