向页面添加元素（如页脚，图片等）我不断在页面底部添加空白区域。是什么导致它，我该如何解决？
body {
overflow-y: scroll;
}
#stajl ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#stajl ul li:hover a {
background-color: #99bbff;
}
#stajl ul li {
display: inline-block;
}
#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #80aaff;
opacity: 0.7;
}
#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}
#stajl ul ul li {
display: block;
color: white;
width: 352px;
}
#stajl ul ul li a {
color: #52527a;
}
#stajl ul ul li a:hover {
color: #1f1f2e;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}
#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left: 0;
}
#header {
text-align: center;
}
#header h1 {
padding: 0;
margin: 0;
position: relative;
top: -40px;
left: -60px;
color: #99ccff;
text-align: center;
display: inline-block;
}
#bkd {
z-index: -1;
position: relative;
padding: 0;
margin: -9px;
top: -99px;
opacity: 0.6;
}
#bkd img {
width: 100%;
height: 500px;
}
#foot-wrap {
margin: -9px;
}
#footer {
display: block;
width: 100%;
background-color: #e6e6e6;
opacity: 0.9;
position: relative;
top: -150px;
height: 192px;
}
#footer a img {
height: 25px;
width: 25px;
}
#childs a:first-child {
right: -30px;
position: relative;
top: -160px;
left: 150px;
display: inline-block;
}
#footer h2 {
font-weight: bold;
position: relative;
font-family: Verdana;
color: #668cff;
display: inline-block;
left: 80px;
display: inline-block;
}
#footer ul {
list-style-type: none;
}
#footer ul li {
position: relative;
top: -19px;
padding-bottom: 19px;
left: 35px;
font-family: cursive;
color: black;
font-weight: bold;
}
#footer a:nth-child(2) {
right: -30px;
position: relative;
top: -120px;
left: 120px;
display: inline-block;
}
#footer a:nth-child(3) {
right: -30px;
position: relative;
top: -80px;
left: 90px;
display: inline-block;
}
.prvi {
position: relative;
font-family: Verdana;
color: #668cff;
top: -342px;
left: 400px;
display: inline-block;
}<html>
<head>
<title>Potts Financial Services</title>
<link rel="stylesheet" type="text/css" href="./style2.css" />
</head>
<body>
<div id="stajl">
<ul>
<li>
<a href="#">Home Page </a>
</li>
<li>
<a href="#">Services <span class="arrow">▼</span></a>
<ul>
<li>
<a href="#">Trades </a>
</li>
<li>
<a href="#">Exchanges </a>
</li>
<li>
<a href="#">Business to Business </a>
</li>
</ul>
<li>
<a href="#">About </a>
</li>
<li>
<a href="#">Contact </a>
</li>
</ul>
</div>
<div id="img">
<a href="#"><img src="pfslogo2.png" /> </a>
</div>
<div id="header">
<h1>We're here to help! </h1>
</div>
<div id="bkd">
<img src="debtbackground.jpg" />
</div>
<footer>
<div id="foot-wrap">
<div id="footer">
<h2 class="h2"> Social </h2>
<ul>
<li>Twitter</li>
<li>Facebok</li>
<li>Youtube</li>
</ul>
<div id="childs">
<a href="www.twitter.com">
<img src="twitter.png" />
</a>
<a href="www.facebook.com">
<img src="facebook.png" />
</a>
<a href="www.youtube.com">
<img src="youtube.png" />
</a>
</div>
</div>
<h2 class="prvi">Contact</h2>
</div>
</footer>
</body>
</html>
一些图片：
答案 0 :(得分：0)
这是因为left在这里：
#footer ul li {
position: relative;
top: -19px;
padding-bottom: 19px;
left: 35px;
font-family: cursive;
color: black;
font-weight: bold;
}
如果你在那里给width它将会修复。所以，给这个：
#footer ul li {
position: relative;
top: -19px;
padding-bottom: 19px;
left: 35px;
width: 50%;
font-family: cursive;
color: black;
font-weight: bold;
}