代码之家 › 专栏 › 技术社区 › Electrox Mortem

为什么我的分区下面有空格?[复制品]

css html

Electrox Mortem · 技术社区 · 6 年前

这个问题已经有了答案:

percentage height html 5/css 6答

在表格的底部。有白色的。我不能在片段中重新创建它,因为片段不够大,无法重新创建问题。这是正在发生的事情的图片,下面是代码。我需要去掉空白,这样DIV就可以覆盖整个页面了。谢谢你的帮助

*/


/*由视图模板调用*/

*{
框大小:边框框;
}

HTML{
身高:100%;
宽度:100%;
}

身体{
字体系列:“Comic Sans MS”,“Comic Sans MS”,Helvetica,Arial,sans-serif;
宽度:100%;
身高:100%;
保证金:0;
}

H1{
文本对齐:居中;
字体样式:斜体;
颜色:红色;
字体大小:100px
}

{连接}
宽度:100%;
身高:100%;
背景:重复线性梯度(225度,青色,蓝色250px);
边框:1个黑色实心
}

粗体{
字体粗细:粗体;
}

{接合形式}
显示:块;
宽度:100%;
身高:100%;
}

{用户名{
边缘:汽车;
显示:block;
下边距:5px;
填料:10px;
宽度:35%;
边框颜色:蓝色;
边界半径:25px;
字体大小:15px;
字体系列:“Comic Sans MS”,“Comic Sans MS”,Helvetica,Arial,sans-serif;
背景:d4d2d2;
颜色:红色;
}

{游戏}
左边距:32.5%;
文本对齐:居中;
字体大小:28px;
宽度:35%;
边界半径:1px;
背景色:红色;
边框:1倍纯灰;
盒影:2px 2px黑色;
光标:指针;
字体系列:“Comic Sans MS”,“Comic Sans MS”,Helvetica,Arial,sans-serif;
}

游戏:悬停{
背景色:黄色;
}

#播放:活动{
盒影:无;
}

{CTX{{}}
宽度:100%;
身高:100%;
显示:无;
边框:黑色1px纯色
}<代码> < /PRE>
文档类型HTML>
<html lang=“en”>
&头;
<title>animz.io</title>
<meta name=“description”content=“小故障制造的酷东西”>
<meta charset=“utf-8”>
<meta http equiv=“x-ua-compatible”content=“ie=edge”>
<meta name=“viewport”content=“width=device width,initial scale=1”>

&!--导入网页的样式表-->
<link rel=“stylesheet”href=“/style.css”>


&!--导入网页的客户端javascript文件-->
<script src=“/client.js”延迟></script>
</head>
<正文>

主& GT;
<div id=“join”>
<form id=“joinForm”>
H1 & GT;
动漫
/lt/H1& gt;
<input placeholder=“username here”id=“username”>
<button id='play'onclick=“startgame()”>播放!&按钮/按钮;
&表格/表格;
&L/DIV & GT;
<canvas id=“ctx”></canvas>
&;
和/身体;
</html>>=

< / div Percentage Height HTML 5/CSS 6答

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

2 回复 | 直到 6 年前

ksav 6 年前

如果要使用高度百分比值,则必须确定父级的高度。

将此添加到CSS或样式标记中

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

关于…

Ebenezar John Paul 6 年前

测试溶液

已替换

高度:100%; < /代码> < /P> height:100vh; < /代码> 接合形式此外,我还看到了许多重复的CSS样式,它们可以进行优化以获得更好的性能和维护。如果你从一开始就掌握了基本的知识,你以后会感谢你自己的。希望这能解决你的问题。您可以在这里阅读关于修复的更多信息替换 height: 100%; 具有 height: 100vh; 在关节中此外,我还看到了许多重复的CSS样式,它们可以进行优化以获得更好的性能和维护。如果你从一开始就掌握了基本的知识,你以后会感谢你自己的。希望这能解决你的问题。您可以阅读有关修复的更多信息here.