html - 如何删除 html 和 css 中主要内容和页脚之间出现的大空间？-6ren

html - 如何删除 html 和 css 中主要内容和页脚之间出现的大空间？

转载作者：行者123 更新时间：2023-11-28 11:27:05

我不知道为什么主要内容和页脚之间会出现很大的空间？我认为这可能是由于 position:relative/absolute 并用 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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&amp;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{
}

最佳答案

.middle
{
    float:left;
    margin-top: -993px;
}

您的问题是您的.middle 类。它的顶部边距为 -993px。尝试完全删除它(甚至 float:left;)。它会起作用。当图形故障得到修复时，看看它是否改变了其他任何东西

关于html - 如何删除 html 和 css 中主要内容和页脚之间出现的大空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21306268/

文章推荐： php - 使用 wordpress 主题自定义 api 时背景颜色没有改变

文章推荐： javascript - ECMA-262 ===算法解释

文章推荐： php - Isset post 和 break for 循环

文章推荐： swift - 如何将 AVPlayerLayer 显示为全屏？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何删除 html 和 css 中主要内容和页脚之间出现的大空间？