如何删除网页底部的大空白？
[英]How to remove the Large White space at the bottom of my webpage?
问题描述
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) （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 这是上述HTML CSS示例
.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 个解决方案
解决方案1
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. 不知道它是否有帮助，但是当您使用一些相对位置时，请记住DOM元素的原始位置会保留。 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. 在CSS中，您有许多元素的相对位置带有负值，因此，空格是这些元素原始位置的“重影”。
解决方案2
0 已采纳 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何去除网页底部的空白？ (IE/边缘) - 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 - 底部的空白以及如何删除它 - 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?
相关标签