Question

在表单底部。有白色。我无法在代码段中重新创建它，因为该代码段不足以重新产生问题。这是正在发生的情况的图片，下面是代码。我需要摆脱该空白，以便div覆盖整个页面。任何帮助表示赞赏

/* 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>

Answer 1

如果要使用身高的百分比值，则必须确定父母的身高。

将此添加到您的CSS或样式标签

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

问候。

Answer 2

经过测试的解决方案

已替换

Collectors.summingInt(DataPoint::getTotal)

与

Collectors.summingLong()

在#joinForm

中

此外，我看到许多CSS样式是重复的，可以进行优化以提高性能和维护。如果您从一开始就掌握了基础知识，那么稍后您将感激您自己。希望这能解决您的问题。您可以阅读有关修订here的更多信息。

为什么我的div下方有空格？

2 个答案: