Removing White Space at Bottom of Page
Question
Need to remove the white space from the bottom of my web page, not sure what's causing it, most likely a div. I've tried setting height of all elements, not successful. Could it be something with the footer or the 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 answers
solution1
1 2016-12-21 15:01:20
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; 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.
solution2
0 2016-12-21 14:52:35
just add this to your css:
html{
margin:0;
padding:0;
max-height:100vh;
overflow:hidden;
}
body {
background: rgba(1, 1, 1, 0);
height: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
White Space on Bottom of Page
white space at the bottom of page
White Space at bottom of page
Removing the white space at the bottom of blog
Huge White Space At Bottom Of Page
Eliminating white space at bottom of page
White space/ bar at the bottom of the page
White space on the bottom of html page
CSS White Space At Bottom of Page
Removing extra space at the bottom of page
Related Tags