如何在CSS中编码stickyfooter？ [英] how to code a stickyfooter in css?

问题描述

我想要一个头部，身体和footer.I已经编码它。当我改变代码页脚或者坐在身体下面时， HTML代码：

 < div id =bodystyle =background-image：url （IMG / bg.png）;类= 体 > 
< div id =titleclass =title> 
< h1>< strong>< / strong>< / h1> 
< / div> 
 
< div id =descclass =desc> 
< p style =desc p>< / p> 
< / div> 
< / div> 
 
< div id =footerstyle =background-image：url（img / bottom_bar.png）;类= 页脚 > 
< div>< h6 class =footer h6> 2011-FOOOTER< / h6>< a href =>< img src =img / info.pngalt = />< / a>< / div> 
< / div> 
  

CSS代码：

  .body 
 {
 float：left;向左飘浮;宽度：100％;高度：100％;最小高度：100％; overflow-y：scroll; 
} 
 
 .title 
 {
 width：85％;字体重量：粗体;向左飘浮;字体大小：20像素;边距：3％;边距：2％;保证金左：5％;颜色：#FFFFFF; 
} 
 
 .desc 
 {
宽度：90％;字体大小：15像素;保证金左：5％;余量右：5％;向左飘浮;颜色：#FFFFFF;溢出：汽车;文本对齐：理由;行高：18像素; 
} 
 
 .desc p 
 {
 margin-top：0; 
} 
  

页脚的CSS代码：

  .footer 
 {
 float：left;宽度：100％;线字体大小：15像素;填充：0像素;底部：0像素;高度：25像素;字体大小：18像素; 
} 
  

当我编码如下时，页脚位于身体上，当你你可以在页脚下面看到文本

  .footer 
 {
 float：left;宽度：100％;位置：绝对的;线字体大小：15像素;填充：0像素;底部：0像素;高度：25像素;字体大小：18像素; 
} 
  

我希望页脚固定在屏幕的底部，

有人可能会提示我所做的错误以及在哪里？

解决方案

试试看这个样式的滚动条只是删除overflow：隐藏在body中

  html，
 body {
 margin：0; 
 padding：0; 
身高：100％; 
 overflow：hidden; 
} 
 #wrapper {
 min-height：100％; 
职位：亲属; 
 
} 
 #header {
 background：#ededed; 
填充：10px; 
} 
 #content {
 padding-bottom：100px; / *页脚元素的高度* / 
 
} 
 #footer {
 background：＃ffab62; 
宽度：100％; 
 height：100px; 
头寸：固定; 
 bottom：0; 
剩下：0; 
} 
  

I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this

HTML CODE:

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

CSS CODE:

.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; 
}

CSS CODE of footer:

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

when I code it as below,the footer sits on the body and when you go down you can see the text below the footer

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

I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.

Could someone suggest what is the mistake I have done and where?

解决方案

Try this styles for which to see scrollbar just remove overflow:hidden in body

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;
}

这篇关于如何在CSS中编码stickyfooter？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！