页脚不在页面底部

时间：2012-02-20 22:55:08

标签： html css footer

我的页脚不在页面底部。

我尝试过的解决方案： - W3C验证器（现已通过） - 清理代码（缩进等） - 检查所有div和标签已结束

以上都没有奏效，问题仍然存在。

以下是问题的屏幕截图： enter image description here

请不要在中间的红色栏是页脚。它意味着在底部，而不是在页面的中间。

我的Html：

<body>

<div id="call-back"></div>

<div id="header">

<br>

    <span style="color:#BB2131;">
        Welcome to Madhouse Creative    </span>

    <div style="float:right;">
        <img src="images/social/twitter.png" class="social_button" alt="">
        <img src="images/social/facebook.png" class="social_button" alt="">
    </div>

<br>
<br>

    <img src="images/logo.png" alt="logo">

    <div id="nav">
        <ul id="list-nav">
            <li><a href="index.php">HOME</a></li>
            <li><a href="about-us.php">ABOUT</a></li>
            <li><a href="portfolio.php">PORTFOLIO</a></li>
            <li><a href="contact-us.php">CONTACT</a></li>
        </ul>
    </div>

</div>

<div id="head-slider-break"></div>  

<div id="home-slider">

    <script type="text/javascript">
        $(window).load(function() 
            {
                $('#slider').nivoSlider();
            });
    </script>

    <div class="slider-wrapper theme-default">

        <div class="ribbon"></div>

        <div id="slider" class="nivoSlider" style="margin-top:30px;">
            <img src="images/middleimage3.png" alt="" >
            <img src="images/middleimage.png" alt="" >
            <img src="images/middleimage2.png" alt="" >
        </div>
    </div>

</div>

<div id="wrapper">  

    <h1>A <span style="color:#BB2131;">WEB</span> AND <span style="color:#BB2131;">GRAPHIC DESIGN</span> COMPANY</h1>

    <p>Madhouse Creative is a new, innovative company looking to bring a fresh look to how businesses market and present themselves on the internet with elegant designs that contain endless potential. Specialists in user immersing visualisations, they bring a unique approach to brand identity.</p>
    <p>Based in Kent, working with business throughout the UK. We aim to change the way your business is seen, heard and talked about. Contact us today to see how we could help your business.</p>

    <div style="width:960px;border:1px dashed #cccccc; margin-top:40px;"></div>

    <h1>WHAT <span style="color:#BB2131;">WE</span> CAN <span style="color:#BB2131;">OFFER</span>?</h1>


    <div id="what-we-offer" style="border:2px solid #cccccc;">

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">WEB DESIGN</h3>
            </div>
            <img src="images/design-web-image.png" class="home-thumb-image" alt="">
        </div>

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">WEB MARKETING</h3>
            </div>
            <img src="images/web-marketing.png" class="home-thumb-image" alt="">
        </div>

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">GRAPHIC DESIGN</h3>
            </div>
            <img src="images/graphic-design.png" class="home-thumb-image" alt="">
        </div>

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">LOGO DESIGN</h3>
            </div>
            <img src="images/logodesign.png" class="home-thumb-image" alt="">
        </div>

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">VISUALIZATION</h3>
            </div>
            <img src="images/visualization.png" class="home-thumb-image" alt="">
        </div>

        <div class="col">
            <div class="red-box">
                <h3 style="margin-top:0px;">WEB APPS</h3>
            </div>
            <img src="images/web-marketing2.png" class="home-thumb-image" alt="">
        </div>

</div>



</div>
<div id="footer">

</div>

这是我的CSS：

body {
background-color:#ffffff;
margin: 0px;
}
h1 {
font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
}
#content h1 {font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
margin-bottom: -10px;
}

h2, h3, h4, h5, h6{
font-family: "Helvetica Neue" bold;
color:#808080;
}
a {color:#BB2131; text-decoration: none;}
a:hover {color:#BB2131; text-decoration: underline;}
#header{height: 50px; width: 100%;font-family: "Helvetica Neue";
}
#home-slider {
margin:0 auto;width:960px; height:auto;
}
#head-slider-break {height:60px;}
#wrapper{
width:960px;
margin:0 auto;
color:#000000;
font-family: "Helvetica Neue";
font-size:12pt;
line-height:1.2;
word-spacing:1.5;
}
#social{
text-align: right;
padding-top: 4px;
}
#header1{height: 50px; width: 100%; background-image: url(images/header.png);}
#headtxt {margin-top: -40px;}
#nav {width:400px; float: right;}
ul#list-nav {
list-style:none;
padding:0px;
float: right;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
height: 40px;
padding: 7px;
color:#808080;
float:left;
text-align:center;
line-height: 3;
font-size: 15px;
font-family: "Helvetica Neue" bold;
font-weight: bolder;
}

ul#list-nav li a:hover {
color:#BB2131;
}

#head{
color: #ffff66;
font-family: ;
font-size: 30px;
}
.container {
padding-left: 20px;
padding-right: 20px;
}

.social_button {
width:36px;
height:36px;
}
#index_middle_image {
margin-top:30px;
}
#request_call_back {
margin-left:10px;
}
.nivoSlider {
    position:relative;
    width:960px; /* Change this to your images width */
    height:397px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:relative;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}
#redbox {background-image:url('images/red-box-for-web.png'); width:160px;
 height:75px;;color:#ffffff; font-size:14pt;
font-family: "Helvetica Neue"; float:left; text-align:center; line-height:80px; padding-right: 30px;overflow: hidden;}
#greybox {background-image:url('images/grey-box-for-web.png'); width:160px; 
height:75px;color:#BB2131; font-size:14pt;
font-family: "Helvetica Neue"; float:left;text-align:center;line-height:80px; padding-right: 30px; overflow: hidden;}


#what-we-offer .col {float: left; width: 315px; padding: 2px;}
#what-we-offer {width: 960px;margin-bottom: 10px;
padding: 5px;
height: auto;
float: left;}
.red-box {
background-image: url(images/red-box.png);
width: 315px;
height: 68px;
margin-bottom: 5px;
margin-top: 5px;
}

#what-we-offer h3 {color: #ffffff; text-align: center; line-height: 4;}

.home-thumb-image {width:315px; height: 179px;}

#call-back{background-image: url(images/REQUEST-CALL-BACK-2.png); float: right; width: 100px; height: 100px; top: 0; right: 0; position: fixed; }

#footer {background-image: url(images/footer2.png); height: 300px;} 

#home-text {width:960px; height:auto;}
#header {
width:960px;
margin:0 auto;
font-family: "Helvetica Neue";
font-size:12pt;
word-spacing:1.5;
}

我已尽力包含任何必要的代码并编辑出任何不必要的CSS。

如果有人可以帮助诊断我的代码有什么问题和/或我需要添加什么，那将是一个很大的帮助。

2 个答案:

答案 0 :(得分：3)

看起来你正在浮动#what-we-offer。将clear:both添加到#footer以确保清除所有浮动元素。

答案 1 :(得分：1)

尝试将clear: both;添加到页脚的CSS中。这应该可以解决问题。

相关问题
最新问题