如何刪除網頁底部的大空白？
[英]How to remove the Large White space at the bottom of my webpage?
問題描述
我在網頁底部有一個巨大的空白的問題。 我嘗試了很多小時來解決問題，但似乎找不到錯誤的地方。 有人可以幫我解決這個問題嗎？ 我已在下面附上我的代碼示例。這是我的代碼示例。 （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>
這是上述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;
}
問題是我在網頁下方看到一個巨大的空白。 一個巨大的。 有人可以幫我嗎？
.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
不知道它是否有幫助，但是當您使用一些相對位置時，請記住DOM元素的原始位置會保留。 在CSS中，您有許多元素的相對位置帶有負值，因此，空格是這些元素原始位置的“重影”。
解決方案2
0 已采納 2017-07-30 16:09:54
你應該
- 如果您確實不需要，請避免相對定位。 因為相對放置的元素占據的空間與其靜態放置的空間相同（默認情況下）。
- 將元素放在所需的容器中。
演示：
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>
我的網頁底部有一個不必要的空白，它是從哪里來的，我該如何擺脫它？
[英]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?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.