Question

我尝试过常用解决方案来删除页脚后的空白区域，但我似乎无法解决问题。我不知道如何摆脱额外的浅蓝色空间。

我尝试过：

* {
        margin: 0;
}
html, body {
        height: 100%;
}

我的html（index.html）：

<html>
<head>
<meta name="description" content="no logs vpn" />
<meta name="keywords" content="vpn, no logs, zero logs" />
<meta name="author" content="metatags generator">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 days">
<title>ZeroLogs VPN - NO LOGS HERE!</title>
<!-- vpn, no logs, zero logs -->
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="./images/eagle.ico" type="image/x-icon" />
<body bgcolor="#010c30">
<div class='bartop'>
<div class='title'>
<font color='white' face='Cantarell' size=5><b><a href=./index.html style="text-decoration:none; color:white">ZER0LOGSVPN</a></b></font>
<br>
<font color='black' face='Cantarell' size=2><b>&nbsp;&nbsp;&nbsp;WE DON'T TRACK YOU</b></font>
</div>
</div>
<div class='eagle'>
<img src='./images/eagle.png' width='50px' height='40px'>
</div>
<div class='menu'>
<ul>
  <li><a href="about.html">About Us</a></li>
  <li><a href="faq.html">FAQ</a></li>
  <li><a href="disable.html">Disable IPv6</a></li>
  <li><a href="leak.html">DNS Leak Protection</a></li>
  <li><a href="why.html">?Why use a VPN</a></li>
  <li><a href="connect.html">How to connect</a></li>
  <li><a href="configs.html">Configurations</a></li>
</ul>
</div>
<div class="first">
<div class='switch'>
    <img src="./images/switch.png" width="260" height="100">
</div>
<div class='texttop'>
<font color='white' face='Cantarell' size=4><b><center>We have a strict zero log policy! Which means we have no data to give if we receive a court order...</font></b></center>
  <br><font color='white' face='Cantarell' size=4><b><center>We don't censor anything!</font></b></center>
 </div>
</div>
<div class='second'>
 <div class='textmiddle'>
 <font face='Cantarell' color='#013E70'>
 <center>
 <b>Reasonable prices</b>
 <br><br>
 <b><font color='black'>We accept:</b></font>
 <br><br>
 <img src='./images/bitcoin.png' width='28' height='28'>&nbsp;&nbsp;<img src='./images/monero.png' width='27' height='27'>&nbsp;&nbsp;<img src='./images/dash.png' width='28' height='28'>
 </center>
 </font>
 </div>
 </div>
  <div class='pay1'>
   <div class='pay1text'>
    <font face='Cantarell' color='#013E70'>
    <center>
    <font face='Cantarell' size=4>1 Month</font>
    <br><br><br>
    <font face='Cantarell' size=6> 1.49 $</font>
    <br><br>
    <br><br>
     <a href="one.html"><span class="button button1">SIGN UP</span></a>
    </center>
</div>
</div>
<div class='pay2'>
   <div class='pay2text'>
    <font face='Cantarell' color='#013E70'>
    <center>
    <font face='Cantarell' size=4>3 Months</font>
    <br><br><br>
    <font face='Cantarell' size=6> 4  $</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b> 1.33  $ / month</font></b>
    <br><br>
     <a href="three.html"><span class="button button1">SIGN UP</span></a>
    </center>
</div>
</div>
<div class='pay3'>
   <div class='pay3text'>
    <font face='Cantarell' color='#013E70'>
    <center>
    <font face='Cantarell' size=4>6 Months</font>
    <br><br><br>
    <font face='Cantarell' size=6> 7.49 $</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b> 1.24  $ / month</font></b>
    <br><br>
     <a href="six.html"><span class="button button1">SIGN UP</span></a>
    </center>
</div>
</div>
<div class='pay4'>
   <div class='pay4text'>
    <font face='Cantarell' color='#013E70'>
    <center>
    <font face='Cantarell' size=4>12 Months</font>
    <br><br><br>
    <font face='Cantarell' size=6> 14.49 $</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b> 1.20  $ / month</font></b>
    <br><br>
     <a href="twelve.html"><span class="button2 button1">SIGN UP</span></a>
    </center>
</div>
</div>
<div class='pay5'>
<div class='pay5text'>
<font face='Cantarell' color="white">
<center>
<b>Best Value</b>
</center>
</font>
</div>
</div>
<div class='opensource'>
 <font face='Cantarell' color='#013E70'>
 <center>
 <b>We love Open-Source!
 <br>
 <font color='black'>We use Debian and OpenVPN on our servers.</b></font>
 </center>
 </font>
 </div>
<div class='table1'>
   <div class='table1text'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Tunnels</font>
    <br><br>
    <li><font face='Cantarell' size=2><b>Ports and Protocols</li></font></b>
    <font face='Cantarell'  color='black' size=2>We offer OpenVPN on port 1194 / UDP</font>
    <br>
    <li><font face='Cantarell' size=2><b>Data Channel Ciphers</li></font></b>
    <font face='Cantarell' size=2 color='black'>AES-256-GCM or AES-256-CBC</font>
    <br>
    <li><font face='Cantarell' size=2><b>Control Channel Ciphers</li></font></b>
    <font face='Cantarell' size=2 color='black'>TLS-DHE-RSA-WITH-AES-256-GCM-SHA384 or ECDHE-RSA-AES256-GCM-SHA384 or TLS-DHE-RSA-WITH-AES-256-CBC</font>
    <br>
    <li><font face='Cantarell' size=2><b>Key sizes</li></font></b>
    <font face='Cantarell' size=2 color='black'>RSA key with a 4096 bit key size using a Diffie-Hellman key exchange.</font>
    <li><font face='Cantarell' size=2><b>Shared Public IPv4</li></font></b>
    <font face='Cantarell' size=2 color='black'>We offer a shared public IPv4.</font>
    </div>
    </div>
<div class='table2'>
   <div class='table2text'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Privacy</font>
    <br><br>
    <li><font face='Cantarell' size=2><b>Traffic or User</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log any traffic or user activity.</font>
    <br>
    <li><font face='Cantarell' size=2><b>Connection</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log timestamps or any information relating to when you connect or disconnect.</font>
    <br>
    <li><font face='Cantarell' size=2><b>Bandwidth</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log or shape bandwidth.</font>
    <br>
    <li><font face='Cantarell' size=2><b>IP addresses</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log your original IP addresses when you connect OR the IP address that you get assigned.</font>
    <li><font face='Cantarell' size=2><b>Sessions</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log the number of your active sessions or total sessions.</font>
    <li><font face='Cantarell' size=2><b>DNS requests</li></font></b>
    <font face='Cantarell' size=2 color='black'>We do NOT log your DNS requests.</font>
</div>
</div>
<div class='table3'>
   <div class='table3text'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Locations</font>
    <br><br>
    <li><font face='Cantarell' size=2><b>Poland</li></font></b>
    <font face='Cantarell' size=2 color='black'>We offer OpenVPN service in Poland.</font><br>
    <img src="./images/poland.png" width="50px" height="35px">
    <br>
    <li><font face='Cantarell' size=2><b>Moldova</li></font></b>
    <font face='Cantarell' size=2 color='black'>We offer OpenVPN service in Moldova.</font><br>
    <img src="./images/moldova.png" width="50px" height="35px">
    <br>
    <li><font face='Cantarell' size=2><b>Ukraine</li></font></b>
    <font face='Cantarell' size=2 color='black'>We offer OpenVPN service in Ukraine.</font><br>
    <img src="./images/ukraine.png" width="50px" height="35px"> 
</div>
</div>
<div class='textdown1'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Strong encryption</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>On our OpenVPN servers we offer the best encryption possible with AES-256 and Elliptic Curve DH key exchange.</font></b>
</div>
<div class='textdown2'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Free trial</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>Try before you buy! Email us to get 24 hours trial for free with no caveats.</font></b>
</div>
<div class='textdown3'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Unlimited bandwidth</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>Download and upload as much data as you want without any limits.</font></b>
</div>
<div class='textdown4'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>Multiple devices</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>Connect unlimited devices per account. No strings attached.</font></b>
</div>
<div class='textdown5'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>No logging</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>No logs, which means we have no data to hand out on such a request.</font></b>
</div>
<div class='textdown6'>
    <font face='Cantarell' color='#013E70'>
    <font face='Cantarell' size=4>No restrictions</font>
    <br><br>
    <font face='Cantarell' size=2 color="black"><b>We do not censor, restrict or shape your traffic on any port or protocol.</font></b>
</div>
<div class="last">
<div class="binary">
<img src="./images/binary.png" width="255" height="100">
</div>
 <div class='textlast'>
  <font  color='white' face='Cantarell' size=4><b><center>With our VPN solution you can be sure to stay hidden...</font></b></center>
  <br><font color='white' face='Cantarell' size=4><b><center>We don't censor anything!</font></b></center>
 </div>
</div>
<div class='bardown'>
<div class='titledown'>
<font color='white' face='Cantarell' size=5><b><a href=./index.html style="text-decoration:none; color:white">ZER0LOGSVPN</a></b></font>
<br>
<font color='black' face='Cantarell' size=2><b>&nbsp;&nbsp;&nbsp;WE DON'T TRACK YOU</b></font>
</div>
</div>
<div class='menudown'>
<ul>
  <li><a href="contact.html">Contact US</a></li>
  <li><a href="tips.html">Tips</a></li>
  <li><a href="terms.html">Terms of Service</a></li>
  <li><a href="downloads.html">Downloads</a></li>
  <li><a href="warrant.html">Warrant Canary</a></li>
  <li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div class="extra">
<center>
<font face='Cantarell' color="#010c30">openvpn, zero logs , no logs vpn, vpn</font>
 </center>
 </div>
</div>
 </body>
</html>

我的css：（main.css）

.bartop {overflow:hidden;position:relative;width:20px;height:100px;z-index:1; background-color: #0181E9; background-image: url(./images/back.png) ; background-repeat: repeat-x; position:relative;top:5px; bottom: 70px; width:99%;height:50px;z-index:1; border-top-left-radius: 1em; border-top-right-radius: 1em; margin-left: auto ; margin-right: auto ;}
.title  {overflow:hidden;position:relative; top:0px; left:20px; }
.menu {position:relative; top:-40px;  direction: rtl; left:-30px ;  z-index:2;  font-family: Cantarell;}
.eagle { position:absolute; top:21px; left:210px ;  z-index:2; }
.first {position:relative; width: 99%; height: 100px ; left:0px; top: 5px; background-color: #013E70 ; margin-left: auto ; margin-right: auto ;}
.second {position:relative; width: 99%; height: 1450px ; left:0px; top: 6px; background-color: #FFFFFF ; margin-left: auto ; margin-right: auto ;}
.switch {z-index:400; position:absolute; top:0px; left:0px;}
.texttop {overflow:hidden;position:relative; top:-2px; width:92%; margin-left: auto ; margin-right: auto ; z-index:1000; }
.textmiddle  {overflow:hidden;position:relative; top:40px; width:92%; margin-left: auto ; margin-right: auto ; }
.pay1 {position:relative; top:-1250px; width:20%;  left:7% ; height:300px; border: 1px solid ; border-color: #013E70 ; border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;  z-index:3; }
.pay1text {overflow:hidden;position:relative; top:40px; width:92%; margin-left: auto ; margin-right: auto ; }
.pay2 {position:relative; top:-1552px; width:20%;  left:29% ; height:300px; border: 1px solid ; border-color: #013E70 ; border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;  z-index:3; }
.pay2text {overflow:hidden;position:relative; top:40px; width:92%; margin-left: auto ; margin-right: auto ; }
.pay3 {position:relative; top:-1856px; width:20%;  left:51% ; height:300px; border: 1px solid ; border-color: #013E70 ; border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;  z-index:3; }
.pay3text {overflow:hidden;position:relative; top:40px; width:92%; margin-left: auto ; margin-right: auto ; }
.pay4 {position:relative; top:-2158px; width:20%;  left:73% ; height:300px; border: 1px solid ; border-color: #013E70 ; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;  z-index:3; }
.pay5 {position:relative; top:-2500px; left:73%; width:20%;  height:40px; border: 1px solid ; border-color: #013E70 ; background-color: #013E70;  border-top-left-radius: 1em; border-top-right-radius: 1em; }
.pay5text {overflow:hidden;position:relative; top:10px;  left:0px;width:92%; margin-left: auto ; margin-right: auto ; }     
.pay4text {overflow:hidden;position:relative; top:40px; width:92%; margin-left: auto ; margin-right: auto ; }
.opensource {overflow:hidden;position:relative; left: 0%; top:-2170px; width:100%; margin-left: auto ; margin-right: auto ; }
.table1 {position:relative; top:-2135px; width:20%;  left:21% ; height:580px; border: 1px solid ; border-color: #013E70 ; border-top-left-radius: 1em;  border-bottom-left-radius: 1em;   z-index:4; }
.table1text {overflow:hidden;position:relative; top:10px; width:92%; margin-left: auto ; margin-right: auto ; }
.table2 {position:relative; top:-2717px; width:20%;  left:41% ; height:580px; border: 1px solid ; border-color: #013E70 ;  z-index:55; }
.table2text {overflow:hidden;position:relative; top:10px; width:92%; margin-left: auto ; margin-right: auto ; }
.table3 {position:relative; top:-3299px; width:20%;  left:61% ; height:580px; border: 1px solid ; border-color: #013E70 ; border-top-right-radius: 1em; border-bottom-right-radius: 1em; z-index:56; }
.table3text {overflow:hidden;position:relative; top:10px; width:92%; margin-left: auto ; margin-right: auto ; }
.textdown1 {overflow:hidden;position:absolute; top:1380px; width:20%; left:15% ; margin-left: auto ; margin-right: auto ; }
.textdown2 {overflow:hidden;position:absolute; top:1530px; width:20%; left:15% ; margin-left: auto ; margin-right: auto ; }
.textdown3 {overflow:hidden;position:absolute; top:1375px; width:20%; left:45% ; margin-left: auto ; margin-right: auto ; }
.textdown4 {overflow:hidden;position:absolute; top:1525px; width:20%; left:45% ; margin-left: auto ; margin-right: auto ; }
.textdown5 {overflow:hidden;position:absolute; top:1370px; width:20%; left:73% ; margin-left: auto ; margin-right: auto ; }
.textdown6 {overflow:hidden;position:absolute; top:1520px; width:20%; left:73% ; margin-left: auto ; margin-right: auto ; }
.last {position:relative; width:99%; height: 100px ; left:-0%; top: -3032px; background-color: #013E70 ; margin-left: auto ; margin-right: auto ; }
.binary {z-index:400; position:relative; top:0px; left:0px; direction: rtl;}
.textlast {overflow:hidden;position:relative; top:-70px; width:92%; margin-left: auto ; margin-right: auto ; z-index:100;}
.bardown  {overflow:hidden;position:relative;width:20px;height:100px;z-index:1; background-color: #0181E9; background-image: url(./images/back2.png) ; position:relative;top:-3032px; bottom: 70px; width:99%;height:50px;z-index:1; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; margin-left: auto ; margin-right: auto ; }
.titledown  {overflow:hidden;position:relative; top:2px; left:20px; }
.menudown {position:relative; top: -3070px; direction: rtl; left:-30px ; z-index:100;}
.extra {position:absolute; top:1800px ; width: 90% ; left: 1%; background-color: #010c30 }


.button2 {
    background-color: #013E70; /* Blue */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    font-family: Cantarell;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;
}

.button {
    background-color: #0181E9; /* Blue */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    font-family: Cantarell;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-top-left-radius: 1em; border-top-right-radius: 1em; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em;
}

.button1 {
    -webkit-transition-duration: 0.4s; /* Safari */.button {
    background-color: #4CAF50; /* Blue */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    font-family: Cantarell;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;

}
    transition-duration: 0.4s;
}

.button1:hover {
    background-color: #013E70; /* Blue */
    color: white;
}


.button2:hover {
    background-color: #0181E9; /* Blue */
    color: white;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 1300px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #FFFFFF;
    padding: 4px 8px;
    text-decoration: none;
    float: right;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
    float: right;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em; 
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

我做错了什么？这里可以看到空白区域：

https://zer0logs.net/

感谢您的时间！

Answer 1

这种情况正在发生，因为font tags从pay1之后开始，div aren't nested properly in your code并且它们正在导致整个内容中出现额外空间。您也可以在浏览器的Inspector中查看它。

页脚后删除空格

1 个答案: