删除页面底部的空白答案

【问题标题】：Removing White Space at Bottom of Page删除页面底部的空白
【发布时间】：2016-12-21 14:40:58
【问题描述】：

需要从我的网页底部删除空白，不确定是什么原因造成的，很可能是 div。我试过设置所有元素的高度，没有成功。可能是页脚或欢迎 div 的东西吗？

/* * {
   border: 1px solid red !important;
}
*/

body {
  background: rgba(1, 1, 1, 0);
  height: 100%;
}
#welcome {
  font-family: "Alfa Slab One", serif;
  text-align: center;
  font-size: 40px;
  color: white;
  margin-bottom: 0;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  display: none;
}
#welcomediv {
  margin-left: 20px;
  font-family: "Alegreya SC", serif;
  font-size: 30px;
  display: none;
}
#About {
  height: auto;
  background: black;
  margin-top: 30px;
}
#abouth1 {
  padding-top: 10px;
  font-family: "Alfa Slab One", serif;
  color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  text-align: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}
#navbar {
  display: none;
}
#navbar li {
  float: left;
}
#navbar li a {
  font-family: "Alfa Slab One", serif;
  font-size: 20px;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  padding-bottom: 10px;
  text-decoration: none;
}
#navbar li a:hover {
  background-color: #111;
}
#homepageh1 {
  padding-left: 15px;
  margin-top: 0;
  margin-left: -10px;
  margin-bottom: 0;
  color: white;
  font-size: 35px;
  font-family: "Alfa Slab One";
  text-shadow: 4px 4px 4px black;
  display: none;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
h3 {
  padding-left: 15px;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-size: 30px;
  color: black;
  font-family: "Alegreya Sans SC";
  display: none;
}
li {
  margin-bottom: 5px;
}
footer {
  font-size: 20px;
  position: relative;
  bottom: 0;
  right: 25%;
  margin-left: 650px;
  text-align: center;
  display: none;
}
.fa {
  color: white;
  margin-left: 200px;
}
#moveleft {
  margin-left: 75px;
  margin-bottom: 0;
  height: 300px;
}
#globe {
  color: white;
  font-family: "Alegreya Sans SC", serif;
  padding-left: 175px;
  font-size: 40px;
  margin-top: -40px;
}
#brandsp {
  font-size: 20px;
  margin-left: -80px;
  margin-top: -40px;
  margin-bottom: 0;
}
#newdiv {
  margin-top: 0;
  font-size: 20px;
  margin-left: -40px;
}
#clockicon {
  position: relative;
  padding-left: 345px;
  bottom: 212.5px;
}
#clock {
  position: relative;
  color: white;
  bottom: 254.5px;
  padding-left: 510px;
  font-family: "Alegreya Sans SC", serif;
  font-size: 40px;
}
#clock a {
  color: white;
  text-decoration: none;
}
#clock a:hover {
  color: grey;
}
#clockp {
  position: relative;
  bottom: 42.5px;
  font-size: 20px;
  padding-left: -200px;
  margin-left: -80px;
}
#newdiv2 {
  position: relative;
  bottom: 65px;
  font-size: 20px;
  margin-left: -25px;
}
#newdiv3 {
  position: relative;
  bottom: 115px;
  font-size: 20px;
  margin-left: -20px;
}
#newspapericon {
  position: relative;
  bottom: 590px;
  margin-left: 900px;
}
#newspaper {
  font-family: "Alegreya Sans SC", serif;
  color: white;
  bottom: 641.5px;
  position: relative;
  font-size: 40px;
  margin-left: 900px;
}
#newspaperdiv1 {
  position: relative;
  bottom: 65.5px;
  font-size: 20px;
  font-family: "Alegreya Sans SC", serif;
  margin-left: -130px;
}
#newspaperdiv2 {
  position: relative;
  font-size: 20px;
  font-family: "Alegreya Sans SC", serif;
  margin-left: -40px;
  bottom: 117.5px;
  a
}
#newspaperp {
  position: relative;
  font-family: "Alegreya Sans SC", serif;
  font-size: 20px;
  color: white;
  bottom: 42.5px;
  margin-left: -70px;
}
#getstarted {
  position: relative;
  bottom: 90px;
  font-family: "Alfa Slab One", serif;
  color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  text-align: center;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta name="description" content="Global Hypebeast is a website for exploring street fashion all across the globe. From everything from Supreme to The Hundreds, Global Hypebeast has it all. This isn't your regular fashion website. 
																			I put in all the work myself to create a truly personalized website that brings fashion into the spotlight." />
  <title>Street Wear from Across the World</title>
  <link rel="icon" href="http://www.globalhypebeast.com/favicon.ico?v=2" />
  <link href='//fonts.googleapis.com/css?family=Alfa Slab One|Alegreya Sans SC|Alegreya SC|Space Mono' rel='stylesheet' />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <h1 id="homepageh1">Global Hypebeast: Street Fashion Worldwide</h1>
  <ul id="navbar">
    <li><a class="active" href="http://www.globalhypebeast.com">HOME</a>
    </li>
    <li><a href="http://www.globalhypebeast.com/brands">BRANDS</a>
    </li>
    <li><a href="#">NEWS</a>
    </li>
    <li><a href="#">ENTERTAINMENT</a>
    </li>
  </ul>
  <h1 id="welcome">
			Mission Hypebeast
		</h1>
  <div id="welcomediv">
    Welcome to Global Hypebeast. I created this website with the intent of sharing street fashion from all around the globe. Street wear is becoming more prominent in cities all around the world, especially those with a high population such as Tokyo, New
    York, and Los Angeles. On this site, you will find street wear images, upcoming brand collaborations, and a general definition of what street fashion really is. If you haven't already acquired a taste for street wear, you will after spending time
    on my website. I promise you. Who doesn't want to be in the know of the world's most iconic fashion?
  </div>
  <div id="About">
    <h1 id=abouth1>
				Everything From Fashion To Entertainment
			</h1>
    <div id="moveleft">
      <i class="fa fa-globe fa-5x" aria-hidden="true"></i>
      <div id="globe">
        <p>
          Brands
        </p>
        <p id="brandsp">
          We've got fashion from Supreme,
          <br/>
          <div id="newdiv">Palace, Bape, Stussy, etc.</div>
        </p>
      </div>
      <i id="clockicon" class="fa fa-clock-o fa-5x" aria-hidden="true"></i>
      <div id="clock">
        <p>
          Articles
        </p>
        <p id="clockp">
          New articles are posted daily so
          <br/>
          <div id="newdiv2">you'll never miss out</div>
          <br/>
          <div id="newdiv3">on fashion again.</div>
        </p>
      </div>
      <i id="newspapericon" class="fa fa-newspaper-o fa-5x" aria-hidden="true"></i>
      <div id="newspaper">
        <p>
          News
        </p>
        <p id="newspaperp">
          Entertainment and fashion
          <br/>
          <div id="newspaperdiv1">news combined creates the best experience</div>
          <br/>
          <div id="newspaperdiv2">for all things fashion.</div>
        </p>
      </div>
    </div>
    <h1 id="getstarted">
					Get started! Check out some posts!
				</h1>
  </div>
  <footer>
    <p>&copy; Daniel Sigut</p>
  </footer>
</body>

</html>

【问题讨论】：

它来自你的字体真棒 CSS 导入。请将您的代码缩减为 minimal 复制。例如。删除所有不相关的内容。这通常会帮助您自己找出导致问题的原因。
你建议我改变什么？
所以，像您的文档类型、<head> 中的大部分内容、改变颜色或背景颜色的样式。任何不影响底部额外空间的东西都应该从演示中删除。此外，您还有一些非法标记，例如 p 内部的 div（p 元素不能包含块级元素，如 div）。还要删除设置为display: none 的任何内容，因为它显然不会导致问题。这是一个更精简的演示，它删除了一堆不相关的样式，但仍然完全显示了问题：jsfiddle.net/2px64ra7
这里是您的站点布局的重新设计的 HTML 和 CSS sn-p，它没有无效代码，并且遵循更好的设计实践：jsfiddle.net/2px64ra7/1 tl;dr - 如果你找到你'必须position 每一个元素，你应该以不同的方式处理你的布局。
天哪，你真的把它清理干净了，哈哈。谢谢你，但我只需要添加一些图像，空间就消失了。至少在 1366x768 分辨率上...

标签： html css

【解决方案1】：

发现此类错误的一个好做法是删除元素，直到您确定哪个是问题的根源。

但是在这里，您的问题似乎来自您将许多元素“相对”定位，然后使用底部移动它们：xx px;因此，它们出现在顶部，但布局仍然包括它们应该占据的空间。

我建议您重构代码以避免必须逐像素定位元素。使用 "display: inline-block" 内联元素并使用边距/填充调整它们之间的空间。

【讨论】：

【解决方案2】：

只需将其添加到您的 css 中：

html{
  margin:0;
  padding:0;
  max-height:100vh;
  overflow:hidden;
}

body {
  background: rgba(1, 1, 1, 0);
  height: 100%;
}

【讨论】：

当设置为 overflow:hidden 时，它会切断 Welcome div。
我的意思是关于 div，我的错。
好的。让我试试别的。我会尽快更新我的答案
问题是您使用bottom 属性的次数太多了。几乎在每个项目上。所以原因不是一个单一的项目。
看看tinypic图片的空白怎么这么大？我尝试设置 max-height 但无济于事。我可能会开始像下面那个人所说的那样挑选元素。