my site (https://frogos.ga) is adding a small overflow to the bottom which has nothing in it and I am wondering what is causing it.

My code is below.

//Elements
const apps = document.querySelector("#br-os-apps")
var menu = document.querySelector("#os-ct-menu")
const os_window = document.querySelector(".br-os-window")
const brand_window = document.querySelector(".brand")
const tbarapps = document.querySelector("#tbarapps")
const app_main = document.querySelector("#app-main")
const maximise = document.querySelector("#maximise")
const shorter = document.querySelector("#shorter")
const cross = document.querySelector("#cross")
const taskbar = document.querySelector("#taskbar")
/* Sound effects */
const click = new Audio("assets/music/click.wav")
const con = new Audio("assets/music/alert.wav")
const okay = new Audio("assets/music/positive.wav")
const no = new Audio("assets/music/negative.wav")

//Operations
/* Reseting window */
close(os_window)
/* Creating apps */
create_app("Browser", "assets/images/apps/chromium.png", "browser", "/browser")
create_app("Calculator", "/assets/images/apps/calculator.png", "calculator", "https://calculator.pottere6.repl.co")
create_app("Text editor", "assets/images/apps/notepad.png", "tedit", "texteditor.html")
create_app("Settings", "assets/images/apps/settings.png", "settings", "/settings")


//App creation function
function create_app(name, image, id, src) {
  let app = document.createElement("div")
  app.classList.add("app")
  app.id = id
  app.onclick = () => window_open(id, src, image)
  app.oncontextmenu = e => {
    click.play()
    open_menu(e, id)
  }
  let img = document.createElement("img");
  img.src = image
  img.setAttribute("alt", name)
  let p = document.createElement("p")
  let tbarapp = document.createElement("img")
  tbarapp.src = image
  tbarapp.id = id
  tbarapp.onclick = () => window_open(id, src);
  p.innerText = name
  app.appendChild(img)
  app.appendChild(p)
  apps.appendChild(app)
  tbarapps.appendChild(tbarapp)
}

function open(tag) {
  tag.style.display = "inline-block"
}

function close(tag) {
  tag.style.display = "none"
}
//Window open function
function window_open(id, src) {
  click.play()
  brand_window.innerHTML = ""
  app_main.innerHTML = "<iframe src="   src   "></iframe>"
  init_window()
  let main = document.querySelector("#"   id)
  let img = document.createElement("img")
  img.src = main.childNodes[0].src
  img.setAttribute("alt", main.childNodes[0].getAttribute("alt"))
  img.setAttribute("alt", main.childNodes[0].getAttribute("alt"))
  let p = document.createElement("p")
  p.innerText = main.childNodes[1].innerText
  brand_window.appendChild(img)
  brand_window.appendChild(p)
  open(os_window)
  dragElement(document.getElementById(id));
}

//Start menu
function startmenu() {
  const newmenu = document.createElement("div");
  newmenu.id = "startmenu"
}

function init_window() {
  close(shorter)
  minimize.onclick = e => {
    click.play()
    minimize_window()
  }
  maximise.onclick = e => {
    click.play()
    maximise_window()
  }
  shorter.onclick = e => {
    click.play()
    shorter_window()
  }
  cross.onclick = e => {
    click.play()
    close(os_window)
    os_window
  }
}
//Window minimize function
function minimize_window() {
  os_window.style.display = "none"
}

//Window maximize function
function maximise_window() {
  open(shorter)
  close(maximise)
  window.restoreX = os_window.style.left
  window.restoreY = os_window.style.top
  os_window.style.top = 0
  os_window.style.left = 0
  os_window.style.width = "100%"
  os_window.style.height = "100vh"
}
//Window un-maximize function
function shorter_window() {
  open(maximise)
  close(shorter)
  os_window.style.top = window.restoreY
  os_window.style.left = window.restoreX
  os_window.style.width = "50%"
  os_window.style.height = "50vh"
}

function open_menu(e, id) {
  e.preventDefault()
  menu.classList.add("active")
  menu.querySelectorAll("ul li")[0].childNodes[0].onclick = () => {
    window_open(id)
  }
  menu.querySelectorAll("ul li")[1].childNodes[0].onclick = () => {
    admin_access(id)
  }
  menu.querySelectorAll("ul li")[2].childNodes[0].onclick = () => {
    remove_app(id)
  }
  menu.querySelectorAll("ul li")[3].childnodes[0].onclick = () => {
    app_properties()
  }
  menu.style.top = e.pageY   5   "px"
  menu.style.left = e.pageX   5   "px"
  return false
}

function admin_access(id) {
  con.play()
  vex.dialog.confirm({
    message: "Would you like to give admin access to this app?",
    callback: function(value) {
      if (value) {
        okay.play()
        window_open(id)
      } else {
        no.play()
        vex.dialog.alert({
          message: "Admin permissions declines"
        })
      }
    }
  })
}

function remove_app(id) {
  con.play()
  vex.dialog.confirm({
    message: "Are you sure to remove this app?",
    callback: function(value) {
      if (value) {
        okay.play()
        document.querySelector("#"   id).remove()
      } else {
        no.play()
        vex.dialog.alert({
          message: "App was not removed"
        })
      }
    }
  })
}

//Anonymous functions in Event Listeners
window.onclick = e => {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active")
  }
}
dragElement(document.querySelector(".br-os-window"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (document.getElementById(elmnt.id   "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id   "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2)   "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1)   "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function checkbg() {
  let bgurl = document.cookie
  if (bgurl) {
    document.querySelector("br-os-window").style.backgroundimage = "url("   bgurl   ")";
  } else {
    document.querySelector("br-os-window").style.backgroundimage = "url(../images/hi.jpg)"
  }
}

function loop() {
  const date = new Date();
  const sec = date.getSeconds();
  setTimeout(() => {
    setInterval(() => {
      datetime()
    }, 60 * 500);
  }, (60 - sec) * 1000);
}

function datetime() {
  const val = new Date();
  const min = val.getMinutes();
  const bmin = min.toString();
  if (bmin.length == 1) {
    let hours = val.getHours();
    let day = val.getDate();
    let month = val.getMonth()   1;
    let year = val.getFullYear();
    let sess = "AM"
    if (hours == 0) {
      hours = 12
      sess = "AM"
    } else if (hours > 12) {
      hours = hours - 12;
      sess = "PM"
    }
    const time = hours   ":0"   min   " "   sess;
    const date = month   "/"   day   "/"   year;
    document.getElementById('time').innerHTML = (time);
    document.getElementById('date').innerHTML = (date);
  } else {
    let hours = val.getHours();
    let day = val.getDate();
    let month = val.getMonth()   1;
    let year = val.getFullYear();
    let sess = "AM"
    if (hours == 0) {
      hours = 12
      sess = "AM"
    } else if (hours > 12) {
      hours = hours - 12;
      sess = "PM"
    }
    const time = hours   ":"   min   " "   sess;
    const date = month   "/"   day   "/"   year;
    document.getElementById('time').innerHTML = (time);
    document.getElementById('date').innerHTML = (date);
  }
}

//Nasa APOD
const url = 'https://api.nasa.gov/planetary/apod?api_key='
const api_key = "ExY2DF0hrHkIlzNaaJboNXxGkiksfybTvubFBgg5"

const fetchNASAData = async() => {
  try {
    const response = await fetch(`${url}${api_key}`)
    const data = await response.json()
    console.log('NASA APOD data', data)
    displayData(data)
  } catch (error) {
    console.log(error)
  }
}

const displayData = data => {
  document.getElementById("br-os-container").style.backgroundImage = "url('"   data.hdurl   "')";
}

fetchNASAData()

document.getElementById('loading').style.display = 'none';
document.getElementById('br-os-container').style.display = 'block';

#loading {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  font-family: sans-serif;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:root::-webkit-scrollbar {
  display: none;
}

:root {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#br-os-container {
  animation: fadeIn 3.5s;
  width: 100%;
  min-height: 100vh;
  background-size: 100% 100%;
}

iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 20;
  left: 0;
}

#dateandtime {
  text-align: right;
}

#tbarapps {
  position: absolute;
  left: 45px;
}

#tbarapps img {
  width: 45px;
  height: 44px;
  cursor: pointer;
}

#br-os-apps {
  width: 100%;
  padding: 10px;
}

#br-os-apps .app {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
}

#br-os-apps .app img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

#br-os-apps .app p {
  color: white;
  font-size: 14px;
  text-align: center;
}

#taskbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  background: grey;
}

#startmenubtn {
  position: absolute;
  width: 45px;
  height: 45px;
  border-top-style: none;
  border-right-style: solid;
  border-bottom-style: none;
  border-left-style: none;
  border-width: 2px;
  cursor: pointer;
}

#startmenu {
  position: absolute;
  width: 45%;
  height: 100px;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  background-color: grey;
}

.br-os-window {
  position: absolute;
  top: 20%;
  left: 25%;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 50%;
  border: 1px solid #EEE;
  border-radius: 10px;
  overflow: hidden;
  resize: both;
}

.br-os-window .window-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: rgb(182, 182, 182);
  padding: 0 10px;
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.br-os-window .window-bar:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.br-os-window .window-bar .brand {
  display: flex;
  justify-content: center;
  align-items: center;
}

.br-os-window .window-bar .brand img {
  width: 32px;
}

.br-os-window .window-bar .brand p {
  color: rgb(0, 0, 0);
  margin-left: 10px;
}

.br-os-window .window-bar .brand .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.br-os-window .window-bar .brand .buttons button {
  border: none;
  outline: none;
  margin-right: 5px;
  color: #FFF;
  padding: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
}

.br-os-window .window-bar .brand .buttons button:first-child {
  background: rgb(3, 82, 0);
}

.br-os-window .window-bar .brand .buttons button:nth-child(2) {
  background: rgb(59, 0, 82);
}

.br-os-window .window-bar .brand .buttons button:nth-child(3) {
  background: rgb(121, 45, 1);
}

.br-os-window .window-bar .brand .buttons button:last-child {
  background: rgb(255, 43, 43);
  margin-right: 0;
}

.br-os-window .window-bar .brand .buttons button:hover {
  background: rgb(182, 182, 182);
  color: rgb(255, 43, 43);
}

.br-os-window .app {
  width: 100%;
  height: 100%;
  background: #FFF;
  overflow: auto;
}

#os-ct-menu {
  display: none;
  position: absolute;
  z-index: 10;
  background: #FFF;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 3px 5px 10px rgba(255, 255, 255, 0, 3), 6px 10px 10px rgba(255, 255, 255, 0, 3);
}

#os-ct-menu ul li {
  color: rgb(46, 26, 3);
}

#os-ct-menu ul li:hover {
  background: antiquewhite;
}

#os-ct-menu.active {
  display: block;
}

#taskbarbuttondiv {
  position: absolute;
  width: 45px;
  height: 45px;
  background-color: black;
  border-style: none;
  cursor: pointer;
}

textarea {
  position: absolute;
  width: 100%;
  height: 90%;
  bottom: 0px;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7529225411166140" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frog OS</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
  <script src="https://kit.fontawesome.com/d7d87efefa.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="assets/plugins/vex/css/vex-theme-os.css">
  <link rel="manifest" href="manifest.json">
</head>

<body onl oad="datetime(), loop()">
  <div id="br-os-container">
    <div id="br-os-apps">
    </div>
    <div id="taskbar">
      <div id="startmenubtn">
        <img src="/assets/images/FrogOS.png" onclick="startmenu()" id="startmenubtn"></img>
      </div>
      <div id="tbarapps"></div>
      <div id="dateandtime">
        <p id="time">Loading...</p>
        <p id="date">Loading...</p>
      </div>
    </div>
  </div>

  <div  draggable="true">

    <div >

      <div ></div>

      <div >

        <button id="minimize">
          <i ></i>
        </button>

        <button id="maximise">
          <i ></i>
        </button>

        <button id="shorter">
          <i ></i>
        </button>

        <button id="cross">
          <i ></i>
        </button>
      </div>
    </div>

    <div  id="app-main">

    </div>
  </div>


  <div id="app-hide"></div>


  <nav id="os-ct-menu">
    <uL>
      <li><a href="javascript:;">Open</a></li>
      <li><a href="javascript:;">Open as administrator</a></li>
      <li><a href="javascript:;">Remove</a></li>
      <li><a href="javascript:;">Properties</a></li>
    </uL>
  </nav>
  <script src="assets/plugins/vex/js/vex.combined.js"></script>
  <script>
    vex.defaultOptions.className = "vex-theme-os"
  </script>
  <script src="assets/js/script.js"></script>
</body>

</html>

CodePudding user response：

If you mean the white strip below, you should use line-height . I have given an example below.

#taskbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    background: grey;
    line-height: 0;
}

CodePudding user response：

The div with id 'tbarapps' has height '48px', so position for element is '-3px'. That's why you get that white space. Change it and use overflow: hidden for body. That will fix your problem