如何去掉网页底部的大白space？

Question

我的网页底部有一个巨大的白色 space 问题。我尝试了好几个小时来解决这个问题，但我似乎找不到哪里出了问题。有人可以帮我解决这个问题吗？我在下面附上了我的代码示例...... 这是我的代码示例。 (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>

这是我的 CSS 上述示例 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;   
}

问题是我在网页下方看到一个巨大的白色space。一个巨大的。有人可以帮帮我吗？？？

.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>

Answer 1

不知道是否有帮助，但是当您使用一些相对定位时，请记住保持 DOM 元素的原始位置。在您的 CSS 中，您有许多具有负值相对位置的元素，因此，白色 space 是这些元素原始位置的 "ghost"。

Answer 2

你应该

如果你真的不需要，请避免相对定位。因为相对定位的元素占用相同的 space 就好像它们是静态定位的（默认情况下）。
将元素放入需要的容器中。

演示：

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>

如何去掉网页底部的大白space？

How to remove the Large White space at the bottom of my webpage?

html

css

webpage