CSS White Space at Bottom of Page Despite Having Both Min-Height and Height Tag

CSS white space at bottom of page despite having both min-height and height tag

The problem is how 100% height is being calculated. Two ways to deal with this.

Add 20px to the body padding-bottom

body {
    padding-bottom: 20px;
}

or add a transparent border to body

body {
    border: 1px solid transparent;
}

Both worked for me in firebug

In defense of this answer

Below are some comments regarding the correctness of my answer to this question. These kinds of discussions are exactly why stackoverflow is so great. Many different people have different opinions on how best to solve the problem. I've learned some incredible coding style that I would not have thought of myself. And I've been told that readers have learned something from my style from time to time. Social coding has really encouraged me to be a better programmer.

Social coding can, at times, be disturbing. I hate it when I spend 30 minutes flushing out an answer with a jsfiddle and detailed explanation only to submit and find 10 other answers all saying the same thing in less detail. And the author accepts someone else's answer. How frustrating! I think that this has happend to my fellow contributors–in particular thirtydot.

Thirtydot's answer is completely legit. The p around the script is the culprit in this problem. Remove it and the space goes away. It also is a good answer to this question.

But why? Shouldn't the p tag's height, padding and margin be calculated into the height of the body?

And it is! If you remove the padding-bottom style that I've suggested and then set the body's background to black, you will see that the body's height includes this extra p space accurately (you see the strip at the bottom turn to black). But the gradient fails to include it when finding where to start. This is the real problem.

The two solutions that I've offered are ways to tell the browser to calculate the gradient properly. In fact, the padding-bottom could just be 1px. The value isn't important, but the setting is. It makes the browser take a look at where the body ends. Setting the border will have the same effect.

In my opinion, a padding setting of 20px looks the best for this page and that is why I answered it this way. It is addressing the problem of where the gradient starts.

Now, if I were building this page. I would have avoided wrapping the script in a p tag. But I must assume that author of the page either can't change it or has a good reason for putting it in there. I don't know what that script does. Will it write something that needs a p tag? Again, I would avoid this practice and it is fine to question its presence, but also I accept that there are cases where it must be there.

My hope in writing this "defense" is that the people who marked down this answer might consider that decision. My answer is thought out, purposeful, and relevant. The author thought so. However, in this social environment, I respect that you disagree and have a right to degrade my answer. I just hope that your choice is motivated by disagreement with my answer and not that author chose mine over yours.

height:auto causes white space at the bottom in mobile devices

These two are the problem

html {height: 100%;}
body {height: 100%;}

100% height of html and body is a heigh of a viewport, and not a whole document. Inner elements made the common height more then viewport and it could make the whitspases you are taking about.

UPDATED

Remove your custom script at all. I will write down only CSS classes, i made changes in. Replace and it will work.

html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #111111;
}
nav.bg-dark {
    background-color: var(--main-bg1-color) !important;
    height: 53px !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
}
.bg {
    min-height: 100vh;
    padding: 53px 0 60px 0;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--main-bg2-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
}
.footer {
    background-color: #111111;
    height: 64px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
}
@media (min-width: 576px) and (max-width: 767px) {
  .bg {
    padding: 53px 0 156px 0;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .bg {
    padding: 53px 0 156px 0;
  }  
}

HTML Footer floating slightly above bottom of page at certain resolutions

Can you try this? I just added an additional container and set a minimum height to it so it uses the available space in the viewport and pushes the footer to the bottom.

To further explain, you have 3 main sections on your page:

Navar or Header
Content
Footer

The idea is to make the content as tall as your screen so the footer is not positioned above the bottom edge of the screen. So you can just create a single container where all of your content's sections will be, and adding some CSS to make it use all that available height.

What I did then was creating the main-container div, and then adding a single CSS rule:

.main-container: {min-height: calc(100vh - 221px)}

I use the calc() function so I can have a bit more control on the final size, in this case, 221px is the sum of your footer's total height + the navbar's total height (you can confirm this just by inspecting each element), so now the .main-containr will have a minimum height of your total screen minus the space used by the footer and navbar, that way, if you have little content on the screen, the footer will still be at the bottom edge because the main container is using that space.

html,body {  width: 100%;  height: 100%;  margin: 0px;  padding: 0px;  overflow-x: hidden;}
/*  Target the element that holds all your content, and set a minimum height so it uses the full viewport height (100vh)  */
.main-content {  min-height: calc(100vh - 221px)}
body {  background-color: white;  color: rgb(85, 85, 85);  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  line-height: 1.6em;  margin: 0;}
.clr {  clear: both;}
.container {  width: 80%;  margin: auto;  overflow: hidden;}
#navbar .container {  margin: 0;}
.button {  background-color: rgb(51, 51, 51);  color: white;}
.button:hover {  background-color: green;}
#myHeader {  background-color: green;  color: white;}
#myHeader .container {  width: 90%;}
#navbar {  background-color: rgb(51, 51, 51);  color: white;}
#navbar ul {  padding: 0;  list-style: none;}
#navbar li {  display: inline;}
#navbar a {  color: white;  text-decoration: none;  font-size: 18px;  padding: 15px;}
#showcase {  background-image: url("../Images/showcase.jpg");  background-position: center right;  background-size: 100% 100%;  color: white;  min-height: 300px;  margin-bottom: 30px;  text-align: center;}
#showcase h1 {  color: white;  font-size: 50px;  line-height: 1.6em;  padding-top: 30px;}
#main {  float: left;  width: 70%;  padding: 0 30px;  box-sizing: border-box;}
#sidebar {  float: right;  width: 30%;  background: rgb(51, 51, 51);  color: white;  padding: 0 30px;  box-sizing: border-box;}
#mainFooter {  background: rgb(51, 51, 51);  color: white;  text-align: center;  padding: 20px;  margin-top: 40px;}
@media(max-width: 600px) {  #main {    width: 100%;    float: none;  }  #sidebar {    width: 100%;    float: none;  }}

<body>  <header id="myHeader">    <div class="container">      <h1>Finn Llewellyn</h1>    </div>  </header>
  <nav id="navbar">    <div class="container">      <ul>        <li><a class="button" href="#">Contact</a></li>        <li><a class="button" href="#">Projects</a></li>        <li><a class="button" href="#">Cool Things</a></li>        <li>Note: These don't do anyting yet lol</li>      </ul>    </div>  </nav>    <!-- Group all of your content inside a single container, not including the navbar and the footer -->  <div class="main-content">    <section id="showcase">      <div class="container">        <h1>Computers are cool lol</h1>        <h2>That's why this site is awful on mobile</h2>      </div>    </section>
    <div class="container">      <section id="main">        <h1>About Me</h1>        <p>          My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and which spec components will best suit a specific use case. I also like to think I'm alright          at diagnosing and solving technical issues. Staying true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn a real, spoken language, like Spanish. Hopefully          i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science, Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a          B-Tech in softwar/app development.        </p>      </section>      <aside id="sidebar">        <h1>Cool Things</h1>        <ol>          <li>Star Wars</li>          <li>Half-Life series</li>          <li>DOOM</li>          <li>Radiohead</li>          <li>Blur</li>          <li>R.E.M</li>          <li>YouTube</li>          <li>AMD Ryzen CPUs</li>          <li>Other geeky stuff</li>        </ol>      </aside>    </div>  </div>
  <div id="mainFooter">    <p>This footer is just here to look nice</p>  </div>

How to remove the white space at the bottom

Please use Chrome DevTools and inspect your text-area div, you will notice that the text area div is not starting at the top. And the problem is with a 5% top margin of your h1 inside the main class.

You can either

Use padding instead of margin: .main h1 { margin: 0; padding: 5% 0 }
Or set margin-top to 0 after the margin you're already using .main h1 { margin-top: 0 }

CSS White Space at Bottom of Page Despite Having Both Min-Height and Height Tag