Footer is not end of page when zooming out

Question

since i am learning CSS i am playing around a little, and i ran into this weird issue where the footer is not the end of the page.

Currently my Footer is like this: If i move the whole div into the footer div, it doesn't show the full content since the footer sticks to the page, so i moved it above to be able to scroll the content, which works fine so far, however, as soon as i zoom out it creates more background below the footer.

html, body {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow-x: visible;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: #666666;
}
/* Style for the navigation */
.topnav {
  overflow: hidden;
  background-color: #333;

}
/* Style the navigation links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 1.3rem 1.3rem;
  text-decoration: none;
  font-weight: bold;
}
/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a:not(.active){
  padding-bottom: (1.3rem + 6px);
}
.topnav .active:after{
  border: 10px solid transparent;
  border-bottom-color: #cd650b;
  border-top-width: 0;
  content: "";
  display: block;
  z-index: 101;
  margin: 0 auto;
  width: 0px;
  margin-top: 11px;
  margin-bottom: -21px;
}
.TopnavSecondBar {
  height: 40px;
  background-color: #cd650b;
  min-width: 100%;
  max-width: 100%;
  margin: auto;
  z-index: 10;
}
/* Triangle Shapes Start*/
.shapes {
    position: 50px 50px 50px 50px;
    background-color: #cd650b;
}
.boxesFooterBoxesBefore .st0, .boxesFooterBoxesAfter .st0 {
    fill: #cd650b;
    bottom: 0;
    right: 0;
}
*, ::before, ::after {
    box-sizing: inherit;
    min-width: 0;
    }
.boxesFooterBoxes {
    color: #eee;
}
/* Content style */
.content {
/*   background-color: #d9d9d9; */
  padding: 10px;
  height: 200px;
}
.button1 {
  background-color: #333;
  color: white;
  padding: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  border-style: hidden;
  cursor: pointer;
  margin-top: 1rem;
}
.button2 {
  text-decoration: none;
  background-color: #333;
  color: white;
  padding: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  border-style: hidden;
  cursor: pointer;
  margin-top: 1rem;
}
.button2:disabled{
  background-color: grey;
  color: white;
  padding: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  border-style: hidden;
  cursor: pointer;
  margin-top: 1rem;
}

/* Center Buttons */
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Footer */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: transparent;
  color: white;
  text-align: center;

}
.footerLinks:link, .footerLinks:visited {
  background-color: #333;
  color: white;
  padding: 0.2rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;  
  margin-top: 0.452125rem;
  margin-bottom: 0.1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.footerLinks:hover, .footerLinks:active {
  background-color: #d9d9d9;
  color: black;
}
.copyright {
  margin-top: 1px;
  font-size: .9525rem
}

/* Javascript message style */
.js{ 
  white-space: nowrap;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.converter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.boxesFooterBoxesAfter {
  width: 101%;
  z-index: 1;
  height: 60px;
  position: relative;
  margin-top: 0px;
  margin-bottom: 2rem;
} 
.BottomNavSecondBar {
  height: 40px;
  background-color: #cd650b;
  min-width: 100%;
  max-width: 100%;
  margin: 0px auto auto auto;
  z-index: 10;
}
.BottomNavThirdBar {
  height: 65.2125px;
  background-color: #333;
  min-width: 100%;
  max-width: 100%;
  margin: 0px auto auto auto;
  z-index: 10;
    text-align: center;
}
.AdditionalPartnerBefore, .st2 {
  width: 100%;
  height: -50px;
  position: relative;
  margin-bottom: -4px;
}

.codebox {
    resize: none;
    border-style: solid;
}
/* Display button above text */
/*.btn i {
  display: block;
} */

.btn {
  width: 8.4rem;
  display: inline-block;
  background-color: #333;
  border: none;
  color: white;
  padding: 1.7rem;
  margin: 0.3rem;
  font-size: 17px;
  cursor: pointer;
  border: solid;
  border-color: #cd650b;
  border-width: 1px;
}
/* Darker background on mouse-over */
.btn:hover {
  background-color: #ddd;
  color: black;
  border-color: #cd650b;
  border-width: 1px;
}
.flex-container {
  display: flex;
  background-color: transparent;
  flex-direction: row;
  flex: auto;
}

.flex-container > div {
  background-color: transparent;
  margin: 20rem;
  padding: 20px;
  font-size: 30px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.btn {
   max-width: 30%;
   margin: 5px;
}
.schmutz {
.footer {
    display: flex;
    background-color: #000;
    color: #fff;
    height: 170px;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/jpg" href="./images/favicon.jpg">       <!--favicon-->
<link rel="stylesheet" href="./styles.css" type="text/css">  
<link rel="stylesheet" href="./button.css" type="text/css"> 
<link rel="stylesheet" href="./math.css" type="text/css"> 
<script src="https://kit.fontawesome.com/763deb09da.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">                                                                        <!--UTF8 charset-->
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">                      <!--responsive-->
<title>Schmutz</title>                                                                        <!--page title-->
</head>
<body>
  <noscript id="noscript" class="noscript">                              <!-- if Javascript is disabled -->
    <meta HTTP-EQUIV="refresh" content=0;url="nojs.php">
  </noscript>       <!-- redirect to nojs site -->
  <div class="topnav">
          <a href="./index.php"><b>Home</b></a>
          <a class="active" href="./configurator.php"><b>Configurator</b></a>
          <a href="./Trader.php"><b>Trader</b></a>
          <a target="_blank" rel="noopener noreferrer" href="https://scum-forum.com/"><b>Forum</b></a>
  </div>
  <div class="TopnavSecondBar"></div>
  <div class="pageNavigationAfter">
    <svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 80" style="enable-background:new 0 0 1920 80;" xml:space="preserve">
        <g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)">
    <path fill="#333" class="st1" d="M0 400 l0 -400 88 1 c48 0 4369 179 9602 398 l9515 399 -9602 1 -9603 1 0 -400z"></path>
        </g>
    </svg>
  </div>
  <div class="flex-container">
    <button class="btn"><i class="fa fa-wrench"></i> Basics</button>
    <button class="btn"><i class="fa fa-car"></i> Vehicle</button>
    <button class="btn"><i class="fa fa-dolly"></i> Items</button>
    <button class="btn"><i class="fa fa-download"></i> Config</button>
  </div>
  <hr>
  <div class="wrapper">
    <div class="a">
      <label class="switch">
        <input type="checkbox"> 
        <span class="slider"></span>
      </label>  testtesttesttest
      <div class="b">
        <label class="test" for="quantity">economy-reset-time-hours</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity"></label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
      <div class="b">
        <label class="test" for="quantity">e</label>
        <input class="number" type="number" id="quantity" name="quantity" min="-1" max="100"> 
        <label for="quantity">testtesttesttesttesttest</label>
      </div>
    </div>
  </div>
  <div class="schmutz">
    <div class="AdditionalPartnerBefore">
      <svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 80" style="max-width:100%; enable-background:new 0 0 1920 80;" xml:space="preserve">
      <!-- <svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="5rem" style="max-width:100%; enable-background:new 0 0 1920 80;" xml:space="preserve"> -->
        <g  transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)">
          <path fill="#333" class="st2" d="M9480 400 l-9485 -398 9603 -1 9602 -1 0 400 0 400 -117 -1 c-65 -1 -4386 -180 -9603 -399z"></path>
        </g>
      </svg>
    </div>
    <div class="BottomNavSecondBar"></div>
    <div class="BottomNavThirdBar">
      <a class="footerLinks" href="https://scum-forum.com/core/legal-notice/">Legal Notice</a>
      <a class="footerLinks" href="https://scum-forum.com/core/privacy-policy/">Privacy Policy</a>
      <p class="copyright">&copy; test-test.com<p>
    </div>
  <div class="footer"></div>
</body>
</html>
 

Answer 1

You can use flex-box to achieve a footer that stays at the bottom of the browser window when there isn't sufficient content to push it down. When there is sufficient content, the footer will be in a natural flow with the other elements and the page (including footer) will scroll as expected.

You can see how this works in this CodePen. (In the future, creating a minimal reproducible example in something like CodePen can help people debug your issue faster. You'll need to strip away as much as possible from your code so that only the essential parts that cause the issue remain.) I've marked the parts relevant to you, but, in summary:

• Set the CSS properties of display: flex; flex-direction: column; min-height: 100vh; on your body (or another element that wraps around your nav, main content, and footer)
• Wrap your main content in a wrapping container, like main and apply flex-grow: 1