我不知道为什么主要内容和页脚之间出现了大空间？我认为这可能是由于位置：相对/绝对并用margin-top替换它但仍然没有解决。这真的是需要我的时间请帮助..
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Fri, 10 Jan 2014 11:20:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="test.css" rel="stylesheet" type="text/css">
<link href="http://www.your-website.com/css/6_dark_orange/css/www_rate_calc_frame.css" rel="stylesheet" title="stylesheet" type="text/css" />
<style type="text/css">
#tmcmini
{
margin-left:-26px;
}
</style>
<title>test</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="wrapper">
<img src="images/logo.gif" />
<h2>Asian Paradise Nepal</h2>
</div>
<div class="login">
<h4>LOGIN REGISTER</h4>
</div>
<div class="booking">
<h4>online booking</h4>
</div>
</header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">company profile </a></li>
<li><a href="#">destination </a></li>
<li><a href="#">activities </a></li>
<li><a href="#">tour packages </a></li>
<li><a href="#">contact </a></li>
</ul>
</nav>
<div class="wrapper">
<div class="left">
<div class="title">
<h5>Trip Search</h5>
</div>
<form action="search"> <li><select>
<option value="volvo">By Destination</option>
<option value="saab">By Activities</option>
<option value="opel">By Duration</option>
<option value="audi">By Price</option>
</select></li>
<li><select>
<option value="saab">By Activities</option>
<option value="opel">By Duration</option>
<option value="audi">By Price</option>
</select></li>
<li><select>
<option value="opel">By Duration</option>
<option value="audi">By Price</option>
</select></li>
<li><select>
<option value="audi">By Price</option>
</select></li>
<input type="image" src="images/srchbtn.jpg">
</form>
</div>
<div class="slide">
<img src="img7.jpg">
</div>
<div class="left">
<div class="title">
<h5>Tour Package</h5>
</div>
<div class="left-content">
<li>Mountain Tour</li>
<li>Cultural Tour</li>
<li>Honeymoon Packages</li>
<li>Holidays Tour</li>
<li>Village Tour</li>
</div>
</div>
<div class="left">
<div class="title">
<h5>Testimonials</h5>
</div>
<div class="left-content">
It is very comfortable </br>to travel with Asian </br>Paradise Nepal.</br>John
</div>
</div>
<div class="left">
<div class="title">
<h5>Destination</h5>
</div>
<div class="left-content">
<li>Nepal</li>
<li>India</li>
<li>Bhutan</li>
<li>Tibet</li>
</div>
</div>
<div class="left">
<div class="title">
<h5>Currency Exchange</h5>
</div>
<div class="left-content">
<iframe id="tmcmini" src="http://themoneyconverter.com/MoneyConverter.aspx?from=USD&to=EUR" style="height: 210px; border: none; " marginheight="0" frameborder="0" scrolling="no" marginwidth="-26px;" ></iframe>
</div>
</div>
<div class="right">
<div class="title">
<h5>Activities</h5>
</div>
<div class="right-content">
<li>Mountain Tour</li>
<li>Cultural Tour</li>
<li>Honeymoon Packages</li>
<li>Holidays Tour</li>
<li>Village Tour</li>
</div>
</div>
<div class="right">
<div class="title">
<h5>Activities</h5>
</div>
<div class="right-content">
<li>Mountain Tour</li>
<li>Cultural Tour</li>
<li>Honeymoon Packages</li>
<li>Holidays Tour</li>
<li>Village Tour</li>
</div>
</div>
<div class="right">
<div class="title">
<h5>Activities</h5>
</div>
<div class="right-content">
<li>Mountain Tour</li>
<li>Cultural Tour</li>
<li>Honeymoon Packages</li>
<li>Holidays Tour</li>
<li>Village Tour</li>
</div>
</div>
<div class="right">
<div class="title">
<h5>Nepal Information</h5>
</div>
<div class="right-content">
<li>Nepal@ glance</li>
<li>Passport & Visa</li>
<li>Money & exchange</li>
<li>Customs & Airport</li>
<li>Customs & Airport</li>
</div>
</div>
<div class="right">
<div class="title">
<h5>Weather</h5>
</div>
<div class="right-content">
<span style="display: block !important; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:94114.1.99999&bannertypeclick=wu_bluestripes" title="San Francisco, California Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_bluestripes&airportcode=KSFO&ForcedCity=San Francisco&ForcedState=CA&zip=94114&language=EN" alt="Find more about Weather in San Francisco, CA" width="100" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:94114.1.99999&bannertypeclick=wu_bluestripes" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span>
</div>
</div>
<div class="clear"></div>
<div class="middle">
<div class="welcome-msg">
<p>Welcome to the Asian paradise!
we are here to make your journey heavenly. we are here to make your journey heavenly.
we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.
we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.we are here to make your journey heavenly.</p>
</div>
<h3>Featured Trip</h3>
<div class="featured-trip">
<img src="images/pic.jpg">
<p class="desc">short description goes here.</p>
</div>
<div class="featured-trip">
<img src="images/pic.jpg">
<p class="desc">short description goes here.</p>
</div>
<div class="featured-trip">
<img src="images/pic.jpg">
<p class="desc">short description goes here.</p>
</div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<div class="footer-menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">company profile </a></li>
<li><a href="#">destination </a></li>
<li><a href="#">activities </a></li>
<li><a href="#">tour packages </a></li>
<li><a href="#">contact </a></li>
</ul>
</div>
<div class="payment">
Payment:
<img src="mastercard.jpg" width="100" height="50">
</div>
<div class="follow-us">
Follow Us On:
<img src="facebook.png" width="32" height="32">
<img src="twitter.png" width="32" height="32">
</div>
</div>
</body>
</html>
的CSS：
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
body{
overflow-x: hidden;
}
header{
background-color:#13dff2;
}
h2{
}
.login{
background:url(images/ap_03.gif) no-repeat;
border-radius:6px;
-moz-border-radius:4px;
border-radius: 6px;
left: 1117px;
position: relative;
top: -137px;
}
.login h4{
padding-top:10px;
padding-left:55px;
}
nav{
background:url(images/ap_10.gif) repeat;
height:34px;
}
nav ul{
font-family:Verdana, Geneva, sans-serif;
text-align:center;
text-transform:uppercase;
padding: 7px;
}
nav ul li{
display:inline;
}
nav ul li a{
text-decoration:none;
list-style:none;
color:black;
padding-left:40px;
}
nav a:hover{
background-color:#13dff2;
background-position:right top;
display:inline-block;
height:35px;
}
.wrapper{
width:960px;
margin:0 auto;
}
/*.trip-search
{
background:url(images/ap_25.gif) no-repeat;
}*/
.title{
background:url(images/ap_13.gif) no-repeat;
width: 182px;
}
.title h5{
font-family:Verdana, Geneva, sans-serif;
padding-left: 25px;
}
select{
background-color:#f5f5f4;
margin-bottom: 10px;
margin-left: 35px;
width: 121px;
}
.search{
background:#13dff2;
width:60px;
}
.search h5{
padding:10px;
font-family:Verdana, Geneva, sans-serif;
}
input{
padding-left:40px;
}
.slide{
/*left: 200px;
position: relative;
top: -179px;*/
float:right;
margin-top:-179px;
}
.slide img{
width:750px;
}
.left{
background:url(images/ap_25.gif) no-repeat;
/*position:relative;
top:-249px;*/
}
/*.left-title
{
background:url(images/ap_13.gif) no-repeat;
}*/
.left-content{
margin-left:30px;
}
.right{
background:url(images/ap_25.gif) no-repeat;
/*left: 768px;
position: relative;
top: -715px;*/
float:right;
position: relative;
top: -440px;
clear:both;
}
.clear{
clear:both;
}
/*.right-title
{
background:url(images/ap_13.gif) no-repeat;
}*/
.right-content{
margin-left:30px;
}
.middle{
float:left;
margin-top: -993px;}
.welcome-msg{
/* position: relative;*/
text-align: justify;
margin-right: 243px;
padding-left: 209px;
}
/* .title-trip
{
background:url(images/ap_13.gif) no-repeat;
width: 182px;
margin-left: 206px;
}
.title-trip h5
{font-family:Verdana, Geneva, sans-serif;
font-size:18px;
padding-left:20px;}
*/
.featured-trip{
/*background:url(images/dscbg.jpg) no-repeat;*/
background-color:#F2F2F2;
/*left: 184px;
position: relative;
top: -1007px;*/
margin: 6px 196px 19px;
width: 529px;
border:#EAEAEA 1px solid;
}
h3{
background:url(images/ap_13.gif) no-repeat;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
margin: 23px 196px 3px;
padding-left: 50px;
/*position: relative;
top: -998px;
left: 190px;*/
}
.featured-trip img{
/*width: 150px;*/
height: 115px;
/*margin-right: 10px;*/
/*float: left; */
}
.desc{margin: -32px 0 0 169px;
}
.footer{
background:#f26c13;
}
.footer-menu ul li{
font-family:Verdana, Geneva, sans-serif;
text-align:center;
text-transform:uppercase;
padding: 7px;
text-decoration:none;
list-style:none;
display:inline;
}
.payment{
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
.follow-us{
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
margin-left:749px;}
img{
}
答案 0 :(得分：0)
.middle
{
float:left;
margin-top: -993px;
}
您的问题是您的.middle课程。它获得了-993px的保证金。
尝试完全删除它（甚至浮动：左;）。它会工作。当修复图形故障时，看看它是否发生了其他变化