unwanted long margin at the bottom

<body>
<div class="nav" id="Nav">
    <a href="#top">Home</a>
    <a href="#nav1">Shop</a>
    <a href="#nav2">Blog</a>
    <a href="#nav3">About</a>
    <a href="#nav4">Contact</a>
  </div>
  <div id="page">


    <img src="xyz" height="300" width="300" style="display: block; margin: 0 auto;">
  </div>
  <div id="nav1"></div>
</body>
  
  
<style>
.nav {
  text-align: center;
  background-color: #edb021;
  position: absolute;
  width: 50%;
  top: 45%;
  left: 50%;
  margin-left: -25%;
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  line-height: 4em;
  border-radius: 10px;
}
.nav a {
  text-decoration: none;
  color: #000;
  font-size: 1em;
  font-weight: 300;
  margin: 5%;
}
.nav a:hover {
  color: #EDB021;
  text-decoration: underline;
}
.scrolldown {
  top: 0vh;
  width: 100%;
  text-align: center;
  position: fixed;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid black;
  border-radius: 0;
  background-color: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  animation-direction: normal;
  animation: navChange 0.25s linear 1;
  margin-left: -50%;
  z-index: 9999;
}
.scrollup {
  text-align: center;
  background-color: #edb021;
  position: absolute;
  width: 50%;
  left: 50%;
  margin-left: -25%;
  border: 1px solid black;
  line-height: 3em;
  border-radius: 10px;
  animation-direction: normal;
  z-index: 9999;
  animation: navChangeBack 0.25s linear 1;
}

@keyframes navChange {
  0% {
    border: 1px solid black;
    border-radius: 10px;
    position: fixed;
    width: 50%;
    left: 50%;
    margin-left: -25%;
    border: 1px solid black;
  }
  100% {
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid black;
    border-radius: 0;
    position: fixed;
    top: 0%;
    width: 100%;
    margin-left: -50%;
  }
}
@keyframes navChangeBack {
  0% {
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid black;
    border-radius: 0;
    width: 100%;
    margin-left: -50%;
  }
  100% {
    border: 1px solid black;
    border-radius: 10px;
    width: 50%;
    left: 50%;
    margin-left: -25%;
    border: 1px solid black;
  }
}
@media only screen and (max-width: 600px) {
  .nav.pagenav {
    display: none;
  }
  #Nav {
    display: none;
  }
}
      
</style>
  
 
  
<script>
    //Determine Scroll Direction
var dir = []
function logScrollDirection() {
    var previous = window.scrollY;
    window.addEventListener('scroll', function(){
        window.scrollY > previous ? dir = "down" : dir = "up" ;
        previous = window.scrollY;
    });
  return dir;
}
logScrollDirection();
//Scroll Direction Determined
//Sticky Nav Start
window.onscroll = function() {
  logScrollDirection();
  expAndStick();
};
var nav = document.getElementById("Nav");
var sticky = nav.offsetTop;
function expAndStick() {
  if ((window.pageYOffset >= sticky)&&(dir == "down")) {
    nav.classList.remove("scrollup");
    nav.classList.add("scrolldown");
  } else if ((window.pageYOffset <= sticky)&&(dir == "up")) {
    nav.classList.remove("scrolldown");
    nav.classList.add("scrollup");
  } 
}
</script>

Click to open image shows unwanted space

this is the code I used in Elementor to create the header but it leaves a long unwanted margin after the nav bar

I already tried removing line height, margins everything but I do not want to use z-index for another container to cover up the space

also, I added this in a separate header, and footer plugin which comes along with Elementkit

Solution

#page {
  min-height: 0vh !important;
}

Problem : #page has min-height: 100vh, due to that this space is showing. Solution : Add above mentioned CSS into your CSS, you will get result as you need.