个人中心
gpt4 book ai didi

html - 删除页面底部的空白

转载 作者：太空宇宙 更新时间：2023-11-04 09:24:08 24 4
gpt4 key购买 nike

需要从我的网页底部删除空白区域，不确定是什么原因造成的，很可能是 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>

最佳答案

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

但是在这里，您的问题似乎来自这样一个事实，即您将许多元素定位为“相对”，然后使用 bottom: xx px; 移动它们；因此，它们出现在顶部，但布局仍然包含它们应占据的空间。

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

关于html - 删除页面底部的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41265389/

24 4 0
文章推荐： java - 如何在 Janino 脚本中表示值列表
文章推荐： python - 将矩阵负值更改为绝对值
文章推荐： java - 仅在用户输入给出"is"后才结束循环 - Java
文章推荐： linux - 我无法启动程序 Linux Graphics Debugger
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com