How to remove the Large White space at the bottom of my webpage?
Question
I have this problem of having a huge white space at the bottom of my web page. I tried for many hours to fix the problem but I can't seem to find where I have gone wrong. Can anybody please help me with the problem? I have attached my code samples below... Here's my code sample. (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
<a href="#">Login</a>
</div>
<div class="Register">
<a href="#">Register</a>
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 100px;color: white;">Home</p></a></div>
</li>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 120px;color: white;">About Us</p></a></div>
</li>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 145px;color: white">Membership</p></a></div>
</li>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 100px;color: white">Search</p></a></div>
</li>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 150px;color: white">New Arrivals</p></a></div>
</li>
<li>
<div><a href="#" style="text-decoration: none"><p style="width: 145px;color: white">Staff</p></a></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI><a href="#" style="text-decoration: none;">OPAC Search</a></LI>
<LI><a href="#" style="text-decoration: none;">New Arrivals</a></LI>
<LI><a href="#" style="text-decoration: none;">How to Become a Member</a></LI>
<LI><a href="#" style="text-decoration: none;">Central Bank of Sri Lanka</a></LI>
<LI><a href="#" style="text-decoration: none;">e-Repository</a></LI>
<LI><a href="#" style="text-decoration: none;">Dictionary</a></LI>
<LI><a href="#" style="text-decoration: none;">Library Policies</a></LI>
<LI><a href="#" style="text-decoration: none;">University of Moratuwa</a></LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI><a href="#" style="text-decoration: none;">Databases</a></LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI><a href="#"style="text-decoration: none;">Research Papers</a></LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI><a href="#"style="text-decoration: none;">Thesis Dissertion</a></LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI><a href="#"style="text-decoration: none;">Library Guide</a></LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI><a href="#"style="text-decoration: none;">Turnitin</a></LI>
</UL>
</div>
</body>
</html>
And here's my CSS sample for the above HTML
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
The problem is I see a huge white space below the the web page. A huge one. Can anybody please help me???
.UpperHeader{ background-color: #808080; width: 100%; height: 160px; } .SliitLogo{ position: relative; top: -150px; left: 5px; margin-right: 10px; } .Login{ position: absolute; float: right; right: 100px; top: 40px; font-size: 10px; } .Register{ position: absolute; float: right; right: 30px; top: 40px; font-size: 10px; } .SliitLibrary{ position: relative; float:right; right: 20px; top: -200px; color: white; font-family: Lifetime; } #Space{ display:inline-block; margin-left: 10px; } #UpperNavigationBar{ background-color: #333333; position: relative; top: -140px; margin: 0px auto; width: 98%; height: 35px; } .UpperNavigationBarContents li{ display:block; float:left; position:relative; top: -7px; left: -20px; color: white; } .SideNavagationBar1{ position: relative; top: -600px; font-size: 14px; } .SideNavagationBar1 li>a{ color: blue; } .SideNavagationBar1 li:not(:last-child) { margin-bottom: 3px; } .SideNavagationBar2{ position: relative; margin-left: 0; top: -600px; font-size: 14px; border: 2px solid red; } .SideNavagationBar2 li>a{ color: blue; } .SideNavagationBar2 li:not(:last-child) { margin-bottom: 20px; } .BackgroundPicture{ position: relative; bottom: 0; top: -130px; background-color: #d3d3d3; width: 100%; min-height: 80vh; }
<!-- IT No: IT17157124 --> <!-- ID No: 952314017V --> <!-- Name: Jananth Banuka Jayarathna --> <!DOCTYPE html> <html> <head> <title>Web Page Exercise 2</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body> <div class="UpperHeader"></div> <div class="SliitLogo"> <img src="images/SLIIT Logo.png" width="25%" height="75"> </div> <div class="Login"> <a href="#">Login</a> </div> <div class="Register"> <a href="#">Register</a> </div> <div class="SliitLibrary"> <h1>SLIIT<span id="Space">LIBRARY</span></h1> </div> <div id="UpperNavigationBar"> <div class="UpperNavigationBarContents"> <ul> <li> <div><a href="#" style="text-decoration: none"><p style="width: 100px;color: white;">Home</p></a></div> </li> <li> <div><a href="#" style="text-decoration: none"><p style="width: 120px;color: white;">About Us</p></a></div> </li> <li> <div><a href="#" style="text-decoration: none"><p style="width: 145px;color: white">Membership</p></a></div> </li> <li> <div><a href="#" style="text-decoration: none"><p style="width: 100px;color: white">Search</p></a></div> </li> <li> <div><a href="#" style="text-decoration: none"><p style="width: 150px;color: white">New Arrivals</p></a></div> </li> <li> <div><a href="#" style="text-decoration: none"><p style="width: 145px;color: white">Staff</p></a></div> </li> </ul> </div> </div> <div class="BackgroundPicture"></div> <h3 style="position: relative;top: -610px; left: 10px;">Categories</h3> <div class="SideNavagationBar1"> <UL TYPE="none"> <LI><a href="#" style="text-decoration: none;">OPAC Search</a></LI> <LI><a href="#" style="text-decoration: none;">New Arrivals</a></LI> <LI><a href="#" style="text-decoration: none;">How to Become a Member</a></LI> <LI><a href="#" style="text-decoration: none;">Central Bank of Sri Lanka</a></LI> <LI><a href="#" style="text-decoration: none;">e-Repository</a></LI> <LI><a href="#" style="text-decoration: none;">Dictionary</a></LI> <LI><a href="#" style="text-decoration: none;">Library Policies</a></LI> <LI><a href="#" style="text-decoration: none;">University of Moratuwa</a></LI> </UL> </div> <h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3> <div class="SideNavagationBar2"> <UL TYPE="none"> <LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI> <LI><a style="text-decoration: none;">Online Journals</a></LI> <LI><div style="text-decoration: none;">Access the available databases</div></LI> <LI><a href="#" style="text-decoration: none;">Databases</a></LI> <LI><div style="text-decoration: none;">Getting start with Research?</div></LI> <LI><a href="#"style="text-decoration: none;">Research Papers</a></LI> <LI><div style="text-decoration: none;">What is done already?</div></LI> <LI><a href="#"style="text-decoration: none;">Thesis Dissertion</a></LI> <LI><div style="text-decoration: none;">Help!!!</div></LI> <LI><a href="#"style="text-decoration: none;">Library Guide</a></LI> <LI><div style="text-decoration: none;">Turnitin</div></LI> <LI><a href="#"style="text-decoration: none;">Turnitin</a></LI> </UL> </div> </body> </html>
2 answers
solution1
0 2017-07-30 14:32:08
Don't know if it helps, but when you use some relative positioning, keep in mind that the original place of the DOM element keeps. In your CSS you have many element that have relative position with negative values, so, white space is the "ghost" of the orignal places of these elements.
solution2
0 ACCPTED 2017-07-30 16:09:54
You should
- avoid relative positioning if you really don't need it. Because relatively positioned elements occupy the same space as if they would be statically positioned (by default).
- place elements in needed containers.
Demo:
body { background-color: #d3d3d3; margin: 0; } .UpperHeader { background-color: #808080; height: 160px; padding-top: 20px; padding-bottom: 20px; } .SliitLogo { margin-right: 10px; } .Login { float: right; font-size: 10px; } .Register { float: right; font-size: 10px; } .SliitLibrary { color: white; font-family: Lifetime; } #Space { display: inline-block; margin-left: 10px; } #UpperNavigationBar { background-color: #333333; margin: 0px auto; width: 98%; height: 35px; } .UpperNavigationBarContents li { display: block; float: left; color: white; } .SideNavagationBar1 { font-size: 14px; } .SideNavagationBar1 li>a { color: blue; } .SideNavagationBar1 li:not(:last-child) { margin-bottom: 3px; } .SideNavagationBar2 { border: 2px solid red; } .SideNavagationBar2 li>a { color: blue; } .SideNavagationBar2 li:not(:last-child) { margin-bottom: 20px; }
<div class="UpperHeader"> <div class="SliitLogo"> <img src="images/SLIIT Logo.png" width="25%" height="75"> </div> <div class="Login"> <a href="#">Login</a> </div> <div class="Register"> <a href="#">Register</a> </div> <div class="SliitLibrary"> <h1>SLIIT<span id="Space">LIBRARY</span></h1> </div> </div> <div id="UpperNavigationBar"> <div class="UpperNavigationBarContents"> <ul> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 100px;color: white;">Home</p> </a> </div> </li> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 120px;color: white;">About Us</p> </a> </div> </li> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 145px;color: white">Membership</p> </a> </div> </li> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 100px;color: white">Search</p> </a> </div> </li> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 150px;color: white">New Arrivals</p> </a> </div> </li> <li> <div> <a href="#" style="text-decoration: none"> <p style="width: 145px;color: white">Staff</p> </a> </div> </li> </ul> </div> </div> <h3>Categories</h3> <div class="SideNavagationBar1"> <div><a href="#" style="text-decoration: none;">OPAC Search</a></div> <div><a href="#" style="text-decoration: none;">New Arrivals</a></div> <div><a href="#" style="text-decoration: none;">How to Become a Member</a></div> <div><a href="#" style="text-decoration: none;">Central Bank of Sri Lanka</a></div> <div><a href="#" style="text-decoration: none;">e-Repository</a></div> <div><a href="#" style="text-decoration: none;">Dictionary</a></div> <div><a href="#" style="text-decoration: none;">Library Policies</a></div> <div><a href="#" style="text-decoration: none;">University of Moratuwa</a></div> <h3>E-Resources</h3> <div class="SideNavagationBar2"> <UL TYPE="none"> <LI> <div style="text-decoration: none;color: black;">Find the Journals</div> </LI> <LI><a style="text-decoration: none;">Online Journals</a></LI> <LI> <div style="text-decoration: none;">Access the available databases</div> </LI> <LI><a href="#" style="text-decoration: none;">Databases</a></LI> <LI> <div style="text-decoration: none;">Getting start with Research?</div> </LI> <LI><a href="#" style="text-decoration: none;">Research Papers</a></LI> <LI> <div style="text-decoration: none;">What is done already?</div> </LI> <LI><a href="#" style="text-decoration: none;">Thesis Dissertion</a></LI> <LI> <div style="text-decoration: none;">Help!!!</div> </LI> <LI><a href="#" style="text-decoration: none;">Library Guide</a></LI> <LI> <div style="text-decoration: none;">Turnitin</div> </LI> <LI><a href="#" style="text-decoration: none;">Turnitin</a></LI> </UL> </div>
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
How to remove white space at the bottom of webpage? (IE/Edge)
How to remove the white space at the bottom
How do I remove empty white space on my webpage?
How can I remove the white space at the bottom of my web pages?
Large space at bottom of webpage
How to remove white space under webpage
How to remove white space around entire webpage
How to remove the extra white space at the bottom of the panels
CSS Grid - White space on the bottom and how to remove it
There's an unnecessary white space at the bottom of my webpage, where is it coming from and how can I get rid of it?
Related Tags