Html 如何在css中编写粘贴页脚？

我想要一个页眉、正文和页脚。我已经对它进行了编码。当我修改代码时，页脚或者在我这样给它的时候，位于正文的下面

HTML代码：

<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
         <h1><strong></strong></h1>
    </div>

    <div id="desc" class="desc">
    <p style="desc p"></p>
    </div>
 </div> 

<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><a href=""><img src="img/info.png" alt="" /></a></div>
</div>

.body
 {
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
 }

.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}

.desc
{
  width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}

.desc p
{
margin-top:0; 
}

 .footer
    {
         float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px;  font-size:18px;
    }

页脚的CSS代码：

<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
         <h1><strong></strong></h1>
    </div>

    <div id="desc" class="desc">
    <p style="desc p"></p>
    </div>
 </div> 

<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><a href=""><img src="img/info.png" alt="" /></a></div>
</div>

.body
 {
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
 }

.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}

.desc
{
  width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}

.desc p
{
margin-top:0; 
}

 .footer
    {
         float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px;  font-size:18px;
    }

当我将其编码如下时，页脚位于主体上，当你往下看时，你可以看到页脚下面的文本

.footer
{
     float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px;  font-size:18px;
}

我希望页脚固定在屏幕底部，并希望文本在没有滚动条的情况下滚动

---

有人能告诉我我犯了什么错误，在哪里吗？

当然你会把页脚推到身体下面，100%的身体高度，没有空间让页脚停留在你的视野中，你需要解决它，不管怎样，这个问题很常见，你的话可能对你没有帮助，你只需要搜索“粘性页脚”这里回答了很多问题，或者你可以看到谷歌的魔力： 及

并了解它。 祝你好运。

在footer类中

而不是

position:absolute;

使用

---

这应该可以用

试试这个样式，可以看到滚动条只需删除溢出：隐藏在正文中

html,
body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
#wrapper {
    min-height:100%;
    position:relative;

}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */

}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
}

---

Reference@AvinVarghese这并不能解决我的问题。无论如何，谢谢萨尔·莫萨法，谢谢你，我已经解决了部分以像素为单位固定身体高度的问题。我在你建议的链接中发现了同样的问题。因此，请建议我一种以%为单位固定高度的解决方法。当我将其用于移动设备时，当设备发生变化时，px高度也会随之变化。请给我建议一种将高度设置为%的方法。我想为css@user的另一个问题找到一个解决方案。我给你的链接将

高度设置为100%，将
最小高度设置为100%，像素的固定值用于页脚
高度
，相同的值必须用于
填充底部
和负相同值
页边顶部
，因此我真的看不出问题还剩下什么，因为链接已经在使用%not px，您是否希望页脚的
高度
也使用%Al-Mothafar，使用
float:left未能解决问题；宽度：100%；最小高度：100%；高度：自动！重要的；身高：100%；溢出：自动我用于正文和页脚
宽度：100%；位置：绝对位置；填充：0px；边际：0px；底部：0px；身高：100%；线高：45px；字体大小：12px；颜色：#FFFFFF；文本对齐：居中；浮动：左；高度：25px；线高：25px
为什么使用
float:left
和
width:100%
这里使用float的点是什么？关于
位置：绝对