Why does my div have a whitespace below it?

Question

At the bottom of the form. There is white. I can't recreate it in a snippet because the snippet isn't big enough to recreate the problem. Here is a picture of what is happening and below that is the code. I need to get rid of that white space so that the div covers the whole page. Any helps is appreciated

/* styles */


/* called by your view template */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
}

h1 {
  text-align: center;
  font-style: oblique;
  color: red;
  font-size: 100px
}

#join {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient( 225deg, cyan, blue 250px);
  border: 1px black solid
}

.bold {
  font-weight: bold;
}

#joinForm {
  display: block;
  width: 100%;
  height: 100%;
}

#username {
  margin: auto;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  width: 35%;
  border-color: blue;
  border-radius: 25px;
  font-size: 15px;
  font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
  background: #D4D2D2;
  color: red;
}

#play {
  margin-left: 32.5%;
  text-align: center;
  font-size: 28px;
  width: 35%;
  border-radius: 1px;
  background-color: red;
  border: 1px solid grey;
  box-shadow: 2px 2px black;
  cursor: pointer;
  font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
}

#play:hover {
  background-color: yellow;
}

#play:active {
  box-shadow: none;
}

#ctx {
  width: 100%;
  height: 100%;
  display: none;
  border: black 1px solid
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Animz.io</title>
    <meta name="description" content="A cool thing made with Glitch">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
  
    
    <!-- import the webpage's client-side javascript file -->
    <script src="/client.js" defer></script>
  </head>
  <body>
    
    <main>
      <div id="join">
          <form id="joinForm">
              <h1>
                Animz.io
              </h1>
              <input placeholder="Username here"  id="username">
              <button id='play' onclick="startgame()">Play!</button>
          </form>
      </div>
      <canvas id="ctx"></canvas>
    </main>
  </body>
</html>

did you try giving main a height of 100% .... like main{height:100%;} — Nawed Khan, Nov 20 '18 at 15:20

score 2 · Accepted Answer · edited Nov 20 '18 at 15:37

2

Your parent's height must be determined if you want to work with a percentage value of height.

Add this to your css or style tag

html,body,main,#join,#joinform {
  height: 100%;
  width: 100%;
  min-height: 100% !important;
}

with regards..

edited Nov 20 '18 at 15:37

ksav

20,015
6
46
66

answered Nov 20 '18 at 15:35

score 0 · Answer 2 · answered Nov 20 '18 at 15:53

Tested solution

Replaced

height: 100%;

with

height: 100vh;

in #joinForm

Also, I see a lot of CSS styles that are repetitive and could be optimized for better performance and maintenance. You would thank yourself later if you get the basics right from beginning. Hope this solves your issue. You can read more about the fix here.

Why does my div have a whitespace below it?

2 Answers2