删除页面底部的空白
[英]Removing White Space at Bottom of Page
问题描述
需要删除网页底部的空白，不确定是什么原因造成的，最有可能是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>© Daniel Sigut</p> </footer> </body> </html>
2 个解决方案
解决方案1
1 2016-12-21 15:01:20
查找此类错误的一个好习惯是删除元素，直到您可以确定是问题的根源。
但是在这里，您的问题似乎来自以下事实：您将许多元素“相对”定位，然后使用底部移动它们：xx px; 因此，它们显示在顶部，但布局仍包含它们应占用的空间。
我建议您重构代码，以避免必须逐像素定位元素。 使用“显示：内联块”内联元素，并使用边距/边距调整元素之间的间距。
解决方案2
0 2016-12-21 14:52:35
只需将其添加到您的CSS：
html{
margin:0;
padding:0;
max-height:100vh;
overflow:hidden;
}
body {
background: rgba(1, 1, 1, 0);
height: 100%;
}
页面底部的空白区域
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.