Question

我有这个问题，在我的网页底部有一个巨大的空白区域。我试了几个小时来解决这个问题，但我似乎无法找到我出错的地方。有人可以帮我解决这个问题吗？我在下面附上了我的代码示例... 这是我的代码示例。（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;   
}

问题是我在网页下方看到一个巨大的空白区域。一个巨大的。有人可以帮帮我吗???

.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中你有许多元素具有负值的相对位置，因此，空格是这些元素的原始位置的“幽灵”。

Answer 2

你应该

如果您真的不需要，请避免相对定位。因为相对定位的元素占据相同的空间，就像它们静态定位一样（默认情况下）。
将元素放入所需的容器中。

演示：

＆＃13;

cmake "/path/to/src/" -G"Visual Studio 14 2015 Win64"

＆＃13;

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;
}

＆＃13;

如何删除我网页底部的大白色空间？

2 个答案: