当前位置： 文江博客话题详情

页脚不在页面底部

发布于 2025-01-07 15:45:34 字数 7824 浏览 0 评论 0原文

我的页脚不在页面底部。

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

上述方法均无效，问题仍然存在。

这是问题的屏幕截图： 在此处输入图像描述

请注意，中间的红条是页脚。它应该位于底部，而不是页面中间。

我的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。

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

原文

My footer isn't at the bottom of the page.

Solutions I have tried:
- W3C validator (now passed)
- Cleaning up code (indenting etc)
- Checked all divs and tags were ended

None of the above worked, and the problem still persists.

Here is a screen shot of the problem:
enter image description here

Please not the red bar across the middle is the footer. Its meant to be at the bottom, not in the middle of the page.

My 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>

Here is my 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;
}

I have done my best to include any necessary code and edit out any unnecessary CSS.

If anyone could help diagnose what is wrong with my code and/or what I need to add it would be a great help.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

南风几经秋 2025-01-14 15:45:34

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

It looks like you are floating #what-we-offer. Add clear:both to #footer to make sure you clear all the floating elements.

回复 原文
魔法少女 2025-01-14 15:45:34

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

Try to add clear: both; to your footer's CSS. This should solve the problem.

回复 原文
~没有更多了~

关于作者

双马尾

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文