页脚不在页面的底部 [英] Footer isn't at the bottom of the page
本文介绍了页脚不在页面的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试过的解决方案：
- W3C验证器（现在通过）
- 清理代码（缩进等）
- 检查所有div和标记已结束
以上都不起作用，问题仍然存在。
以下是问题的屏幕截图：
中间的红色条不是页脚。它的意思是在底部，而不是在页面中间。
我的Html：
<身体GT;
< div id =call-back>< / div>
< div id =header>
< br>
< span style =color：＃BB2131;>
欢迎来到Madhouse Creative< / span>
< div style =float：right;>
< img src =images / social / twitter.pngclass =social_buttonalt =>
< img src =images / social / facebook.pngclass =social_buttonalt =>
< / div>
< br>
< br>
< img src =images / logo.pngalt =logo>
< div id =nav>
< ul id =list-nav>
< li>< a href =index.php>主页< / a>< / li>
< li>< a href =about-us.php>关于< / 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 =sliderclass =nivoSliderstyle =margin-top：30px;>
< img src =images / middleimage3.pngalt =>
< img src =images / middleimage.pngalt =>
< img src =images / middleimage2.pngalt =>
< / 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是一家全新的创新型公司，希望借助包含无尽潜力的优雅设计，重新审视企业如何在互联网上进行市场推广和展示。专注于用户沉浸可视化的专家，他们为品牌标识带来了独特的方法。< / p>
总部设在肯特郡，与英国各地的企业合作。我们的目标是改变您的业务被看到，听到和谈论的方式。请立即与我们联系，了解我们如何帮助您的业务。< / 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-offerstyle =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.pngclass =home-thumb-imagealt =>
< / div>
< div class =col>
< div class =red-box>
< h3 style =margin-top：0px;> WEB MARKETING< / h3>
< / div>
< img src =images / web-marketing.pngclass =home-thumb-imagealt =>
< / div>
< div class =col>
< div class =red-box>
< h3 style =margin-top：0px;>图形设计< / h3>
< / div>
< img src =images / graphic-design.pngclass =home-thumb-imagealt =>
< / div>
< div class =col>
< div class =red-box>
< h3 style =margin-top：0px;> LOGO DESIGN< / h3>
< / div>
< img src =images / logodesign.pngclass =home-thumb-imagealt =>
< / div>
< div class =col>
< div class =red-box>
< h3 style =margin-top：0px;> VISUALIZATION< / h3>
< / div>
< img src =images / visualization.pngclass =home-thumb-imagealt =>
< / div>
< div class =col>
< div class =red-box>
< h3 style =margin-top：0px;> WEB APPS< / h3>
< / div>
< img src =images / web-marketing2.pngclass =home-thumb-imagealt =>
< / div>
< / div>
< / div>
< div id =footer>
< / div>
这是我的CSS：
body {
background-color：#ffffff;
margin：0px;
}
h1 {
font-family：Helvetica Neuebold;
color：#cccccc;
font-size：35pt;
line-height：1.1;
}
#content h1 {font-family：Helvetica Neuebold;
color：#cccccc;
font-size：35pt;
line-height：1.1;
margin-bottom：-10px;
}
h2，h3，h4，h5，h6 {
font-family：Helvetica Neuebold;
颜色：＃808080;
}
a {color：＃BB2131; text-decoration：none;}
a：hover {color：＃BB2131; text-decoration：underline;}
#header {height：50px;宽度：100％; font-family：Helvetica Neue;
}
＃home-slider {
margin：0 auto; width：960px;高度：自动;
}
＃head-slider-break {height：60px;}
#wrapper {
width：960px;
margin：0 auto;
颜色：＃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;宽度：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;
颜色：＃808080;
float：left;
text-align：center;
line-height：3;
font-size：15px;
font-family：Helvetica Neuebold;
font-weight：bold;
}
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; / *更改此图像宽度* /
height：397px; / *更改此图像高度* /
背景：url（images / loading.gif）不重复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'）;宽度：160像素;
height：75px ;; color：#ffffff;字体大小：14pt;
font-family：Helvetica Neue;向左飘浮;文本对齐：中心;行高：80px; padding-right：30px; overflow：hidden;}
#greybox {background-image：url（'images / grey-box-for-web.png'）;宽度：160像素;
height：75px; color：＃BB2131;字体大小：14pt;
font-family：Helvetica Neue;浮动：左;文本对齐：中心;行高：80px; padding-right：30px; overflow：hidden;}
＃我们提供什么.col {float：left;宽度：315px; padding：2px;}
＃我们提供的东西{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;身高：179px;}
＃call-back {background-image：url（images / REQUEST-CALL-BACK-2.png）; float：right;宽度：100px; height：100px; top：0;正确：0;位置：固定; }
#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 。
如果任何人都可以帮助诊断我的代码出了什么问题，或者我需要添加它，那将是非常有帮助的。
解决方案
它看起来像是浮动＃我们提供什么。将 clear：添加到#footer以确保清除所有浮动元素。
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:
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.
解决方案
It looks like you are floating #what-we-offer. Add clear:both to #footer to make sure you clear all the floating elements.
这篇关于页脚不在页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
