html - Gap between content wrapper div and screen bottom - but only under certain conditions

Question

First, here's my live testing page. The issue is that the wrapper div doesn't extend all the way to the bottom of the screen; a small gap occurs between the wrapper div and the actual bottom of the screen. But the gap only occurs with certain conditions:

1. the gap only occurs on screens/windows vertically sized down below a certain point and that point changes depending on whether there is one line of text or two or more. With one line of text, the gap occurs at 614 or shorter. With two or more lines of text it occurs at 633 or shorter.
2. the menu buttons are an SSI include. Viewed locally where the menu doesn't show, there is no gap regardless of how many lines of text are there. The gap only occurs on the uploaded version where the menu shows.

I used media queries so that the wrapper div is only obvious (black border, gradient page background color instead of white like the div) on screens larger than 1024. So the gap won't even be noticeable to anyone unless they are using a screen that is wider than 1024 AND shorter than 633. Given the common resolutions for phones, tablets, computers, TVs etc this is very unlikely (everything with a height less than 633 also has a width under 1024) unless they manually resize their window to be short while staying wide. So this probably isn't an issue I even need to worry about but it is really bugging me that there is some "glitch" in my code causing this.

Here's the relevant code:

body {
  background-color: #ffffff; /* WHITE */
  font-size: 100%;
  height: 100%;
  margin: 0px 0px 0px 0px;
}

/* for screens 1026px and greater */
@media screen and (min-width: 1025px) { 
body { background-color: #000000; /* BLACK */
       background-image: linear-gradient(#ffff00, #00b300, #ffff00);} /* YELLOW GREEN YELLOW */
}

#WRAPPER {
display: block;
position: relative;
width: 1024px;
max-width: 100%;
min-height: 100%;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
justify-content: center;
background-color: #ffffff; /* WHITE */
padding: 0px 10px 0px 10px;
box-sizing: border-box;
}

/* for screens 1026px and greater */
@media screen and (min-width: 1025px) { 
#WRAPPER { box-sizing: border-box;
border-left: 3px solid #000000; /* BLACK */
border-right: 3px solid #000000;
}
}

#mainBack {
max-width:99%;
margin: 0px 0px 0px 0px;
}

p {
    color: #000000; /* BLACK */
    text-align: center;
    font-family: Arial, Verdana;
    font-size: 1rem;
    margin: 10px 0px 5px 0px;
}

.heading {
    color: #0099ff; /* BLUE */
    text-align: center;
    font-family: Arial, Verdana;
    font-size: 1.87rem;
    margin: 0px 0px 0px 0px;
}

div.text {
    max-width: 1000px;
}

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99;
    border: 4px solid #0099ff; /* BLUE */
    border-radius: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    outline: none;
    background-color: #6b6b6b; /* GRAY */
    color: #ffffff; /* WHITE TEXT */
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropbtn {
    background-color: #6b6b6b; /* GRAY */
    color: #ffffff; /* WHITE TEXT */
    min-width: 175px;
    padding: 10px 10px;
    font-size: 16px;
    border: 4px solid #0099ff; /* BLUE */
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-sizing: border-box;
}

.dropdown:hover .dropbtn {
    background-color: #6b6b6b; /* GRAY */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #6b6b6b; /* GRAY */
    width: 95%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 4px solid #0099ff; /* BLUE */
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 1;
}

.dropdown-content a:hover {background-color: #0099ff} /* BLUE */

.dropdown-content a {
    color: #ffffff; /* WHITE */
    padding: 5px;
    text-decoration: none;
    display: block;
}

<html>
<head>
<title>Home Page Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  type ="text/css" href="NEWhome.css" />
<style type="text/css">
</style>
</head>

<div ID="WRAPPER">
<center>

<span class="heading">Home Page Testing</span>
<div class="text"><p>Issue: If screen is 633 or shorter, the wrapper div doesn't extend all the way down, there is a gap of maybe 10 pixels where the background shows. The gap only occurs on the uploaded version; the local version that doesn't display the SSI menu has no gap.</p>
</div>

<!-- this menu is actually a SSI include -->
<center>
<div class="dropdown">
  <button class="dropbtn">Button 1 Label</button>
  <div class="dropdown-content">
    <a href="URL">Link</a>
      <a href="URL">Link</a>
  </div></div> 
  
<div class="dropdown">
  <button class="dropbtn">Button 2 Label</button>
  <div class="dropdown-content">
      <a href="URL" target="_blank">Link</a>
      <a href="URL" target="_blank">Link</a>
  </div></div>   

<div class="dropdown">
  <button class="dropbtn">Button 3 Label</button>
  <div class="dropdown-content">
    <a href="URL">Link</a>
      <a href="URL">Link</a>
  </div></div>
  </center><p>
  <!-- end of include -->

<img id="mainBack" src="TempHome.png" alt="main logo">

</center>

</div> <!-- CLOSES MAIN WRAPPER DIV -->

<!-- Script for Back to Top Button -->
<script>
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>
<!-- END Script for Back to Top Button -->

<button onclick="topFunction()" id="myBtn" title="Go to top of page">Top of Page</button> 

</body>
</html>
 

question from:https://stackoverflow.com/questions/65602006/gap-between-content-wrapper-div-and-screen-bottom-but-only-under-certain-condi

Answer 1

Waitting for answers