0

Existe um Espaço em branco no inferior página HTML que estou criando. Queria removê-la, mas não sei o parâmetro em CSS que está causando aquele espaço indesejado. O código em HTML é o seguinte:

@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>

2
  • 1
    O espaço em branco citado aparece no exemplo criado na sua pergunta?
    – Woss
    Commented 9/02/2021 às 19:51
  • Creio que você se refira ao espaço após o rodapé, nesse caso isso deve resolver: Footer sempre no final da pagina
    – Syzoth
    Commented 14/04/2021 às 19:21

1 Resposta 1

1

Lucas,

Não ficou muito claro, mas creio que o espaço em branco seja entre o footer e o container que você criou.

Você utilizou as seguintes propriedades no #container:

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

Se você remover o height:100vh; ou trocar para 100% vai resolver.

A unidade vh tem com base o tamanho de sua tela. Como o rodapé estava setado para sempre ficar no final, criou-se esse espaço.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .