Unwanted CSS white space

Asked

Viewed 56 times

0

There is a white space at the bottom HTML page that I am creating. I wanted to remove it, but I don’t know the CSS parameter that is causing that unwanted space. The HTML code is as follows:

@keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@media (min-width: 992px) {
  * {
    margin: 0px;
  }
  #container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
  }
  .edusfLogo2 {
    display: block;
    position: relative;
    top: 200px;
    left: 500px;
  }
  .janelaUm {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 301px;
    left: 210px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaUm:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemUsuario {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .perfil {
    position: relative;
    top: 15px;
    left: 45px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaDois {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 171px;
    left: 410px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaDois:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemReservas {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .reservas {
    position: relative;
    top: 10px;
    left: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaTres {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: 42px;
    left: 610px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaTres:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemAdministrador {
    position: relative;
    top: 15px;
    left: 25px;
    width: 80px;
    height: 80px;
  }
  .administrador {
    position: relative;
    top: 9px;
    left: 14px;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .janelaQuatro {
    background-color: rgb(35, 126, 40);
    display: block;
    position: relative;
    top: -87px;
    left: 810px;
    width: 130px;
    height: 130px;
    border-radius: 35%;
  }
  .janelaQuatro:hover {
    animation: bounce 1s;
    background-color: white;
    color: rgb(35, 126, 40);
  }
  .imagemSair {
    position: relative;
    top: 15px;
    left: 35px;
    width: 80px;
    height: 80px;
  }
  .sair {
    position: relative;
    top: 10px;
    left: 50px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .rodape {
    display: inline-block;
    position: relative;
    top: 60px;
    width: 1152px;
    height: 136px;
    background-color: rgb(16, 92, 20);
  }
  .edusfLogo1 {
    display: block;
    position: relative;
    left: 800px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="indexPC.css">
  <link rel="stylesheet" href="indexTV.css">
  <title></title>
</head>

<body class="telaFundo">

  <div id="container">
    <header class="cabeçalho">
      <img class="edusfLogo2" src="edusfLogo2.png" alt="">
    </header>

    <tbody>
      <div class="janelaUm">
        <img class="imagemUsuario" src="images/user.png" alt="Perfil">
        <p class="perfil">Perfil</p>
      </div>

      <div class="janelaDois">
        <img class="imagemReservas" src="images/reservation.png" alt="Reservas">
        <p class="reservas">Reservas</p>
      </div>

      <div class="janelaTres">
        <img class="imagemAdministrador" src="images/administrator.png" alt="Administrador">
        <p class="administrador">Administrador</p>
      </div>

      <div class="janelaQuatro">
        <img class="imagemSair" src="images/exit.png" alt="Sair">
        <p class="sair">Sair</p>
      </div>
    </tbody>
    <tfoot>
      <div class="rodape">
        <p class="">Copyright</p>
        <img class="edusfLogo1" src="edusfLogo1.png" alt="">
      </div>
    </tfoot>
  </div>

</body>

</html>

html css

1 answer

1

Lucas,

It wasn’t very clear, but I think the white space is between the footer and the container you created.

You used the following properties in #container:

#container {
    width: 1152px;
    height: 100vh;
    background-image: linear-gradient(to bottom, white, gray);
}

If you remove the height:100vh; or switch to 100% will solve.

The unity vh based on the size of your screen. As the footer was set to always stay at the end, this space was created.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.