When I resize my window and make it smaller I get this white gap at the bottom of my project-CodePudding

body{
    margin-top: 140px;
}
.outline{
    font-size: 75px;
    text-align: center;
    text-shadow: 
    0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #999,
      0 0 82px #999,
      0 0 92px #999,
      0 0 102px #999,
      0 0 151px #999;;
    -webkit-text-stroke:1px white;
  -webkit-text-fill-color:transparent;
}
.container{
    max-width: 400px;
    margin:10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px grey;
}
#display{
    text-align: right;
    height: 120px;
    line-height: 120px;
    padding-top: 18px;
    font-size: 50px;
    font-weight: 200;
    border-left: 1.5px solid #999;
    color: white;
    text-shadow: 0 0 10px white;
}

.buttons{
    display: grid;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    border-bottom: 3px solid #edebe8;
    grid-template-columns: repeat(4,1fr);
    font-weight:200px; 
    color:white;
}

.buttons > div {
    border-top: 2.5px solid #edebe8;
}

.button{
    border:0.5px solid #999;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    cursor:pointer;
}

#equal{
    background-color: whitesmoke;
    font-size: 35px;
    opacity: 0.3;
    color:black;
}

.button:hover{
    background-color: #323330;
    color:white;
    transition: 0.5s ease-in-out;
}
.foot{
    position: relative;
    text-align: center;
    top:200px;
    color:white;
    text-shadow: 0 0 10px white;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:-2;
  min-height: 100%;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:-1;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
  min-height: 100%;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/background.css">
    </head>
    <body>
        <h1 >The Galaxy Calculator</h1>
        <div ></div>
        <div ></div>
        <section>
            <div >
                <div id="display"></div>
                <div >
                    <div >%</div>
                    <div >/</div>
                    <div >C</div>
                    <div >&larr;</div>
                    <div >7</div>
                    <div >8</div>
                    <div >9</div>
                    <div >*</div>
                    <div >4</div>
                    <div >5</div>
                    <div >6</div>
                    <div >-</div>
                    <div >1</div>
                    <div >2</div>
                    <div >3</div>
                    <div > </div>
                    <div >&plusmn</div>
                    <div >0</div>
                    <div >.</div>
                    <div id="equal" >=</div>
                </div>
            </div>
        </section>
        <footer>
            <p >&copy;MSA 2021, The Galaxy Calculator; Design by Samee</p>
        </footer>
        <script src="index.js"></script>
    </body>
</html>

I tried fixing the margins however it still leaves a bit of whitespace at the bottom. I tried removing certain elements, adjusting my width and height for different tags to see if it made a difference and still the same. I'm guessing it has something to do with my stars and twinkle div. Also when i check my project in developer tools my html and body tag dont extend to the bottom of the page. Really confused, any help would be appreciated.

CodePudding user response：

You had to remove position:relative from your .foot css rule so that your footer doesn't mess up the layout.

Plus for the background to fit the entire page also when you resize the window, I moved the css property in the body selector:

background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;

But more importantly, the height 100% to work needs a parent with a determined height except for the root element. So the quickest solution was to set height:100% to the html element through a css rule.

You can see with your own eyes running the snippet and going full page:

html{
  height: 100%;
}

body{
  margin-top: 140px;
  background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
}
.outline{
    font-size: 75px;
    text-align: center;
    text-shadow: 
    0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #999,
      0 0 82px #999,
      0 0 92px #999,
      0 0 102px #999,
      0 0 151px #999;;
    -webkit-text-stroke:1px white;
  -webkit-text-fill-color:transparent;
}
.container{
    max-width: 400px;
    margin:10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px grey;
}
#display{
    text-align: right;
    height: 120px;
    line-height: 120px;
    padding-top: 18px;
    font-size: 50px;
    font-weight: 200;
    border-left: 1.5px solid #999;
    color: white;
    text-shadow: 0 0 10px white;
}

.buttons{
    display: grid;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    border-bottom: 3px solid #edebe8;
    grid-template-columns: repeat(4,1fr);
    font-weight:200px; 
    color:white;
}

.buttons > div {
    border-top: 2.5px solid #edebe8;
}

.button{
    border:0.5px solid #999;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    cursor:pointer;
}

#equal{
    background-color: whitesmoke;
    font-size: 35px;
    opacity: 0.3;
    color:black;
}

.button:hover{
    background-color: #323330;
    color:white;
    transition: 0.5s ease-in-out;
}
.foot{
    /*position: relative;*/
    text-align: center;
    top:200px;
    color:white;
    text-shadow: 0 0 10px white;
}

/*-------------------------------------------*/

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  /*backgbackgroundround:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;*/
  z-index:-2;
  min-height: 100%;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:-1;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
  min-height: 100%;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">        
    </head>
    <body>
        <h1 >The Galaxy Calculator</h1>
        <div ></div>
        <div ></div>
        <section>
            <div >
                <div id="display"></div>
                <div >
                    <div >%</div>
                    <div >/</div>
                    <div >C</div>
                    <div >&larr;</div>
                    <div >7</div>
                    <div >8</div>
                    <div >9</div>
                    <div >*</div>
                    <div >4</div>
                    <div >5</div>
                    <div >6</div>
                    <div >-</div>
                    <div >1</div>
                    <div >2</div>
                    <div >3</div>
                    <div > </div>
                    <div >&plusmn</div>
                    <div >0</div>
                    <div >.</div>
                    <div id="equal" >=</div>
                </div>
            </div>
        </section>
        <footer>
            <p >&copy;MSA 2021, The Galaxy Calculator; Design by Samee</p>
        </footer>
        <script src="index.js"></script>
    </body>
</html>