删除页面底部的空白

Question

Need to remove the white space from the bottom of my web page, not sure what's causing it, most likely a div. 需要删除网页底部的空白，不确定是什么原因造成的，最有可能是div。 I've tried setting height of all elements, not successful. 我尝试设置所有元素的高度，但不成功。 Could it be something with the footer or the Welcome div? 页脚或Welcome 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>

Answer 1

A good practice to find such bugs is to remove elements until you can identify which one is the source of your problem. 查找此类错误的一个好习惯是删除元素，直到您可以确定是问题的根源。

But here, your issue seems to come from the fact you position many element "relative", then move them using bottom: xx px; 但是在这里，您的问题似乎来自以下事实：您将许多元素“相对”定位，然后使用底部移动它们：xx px; Therefore, they appear at the top, but the layout still includes the space they should occupy. 因此，它们显示在顶部，但布局仍包含它们应占用的空间。

I would suggest you to refactor your code to avoid having to position elements pixel by pixel. 我建议您重构代码，以避免必须逐像素定位元素。 Use "display: inline-block" to inline your elements and adjust the space between them using margins/paddings. 使用“显示：内联块”内联元素，并使用边距/边距调整元素之间的间距。

Answer 2

just add this to your css: 只需将其添加到您的CSS：

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

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

删除页面底部的空白

问题描述

2 个解决方案

解决方案1
1 2016-12-21 15:01:20

解决方案2
0 2016-12-21 14:52:35

删除页面底部的空白

问题描述

2 个解决方案

解决方案1 1 2016-12-21 15:01:20

解决方案2 0 2016-12-21 14:52:35

解决方案1
1 2016-12-21 15:01:20

解决方案2
0 2016-12-21 14:52:35