将页脚粘贴到页面的底部 [英] Making my footer stick to bottom of the page

问题描述

编辑：在您回答之前，请阅读此文！我无法设置页脚，例如height：30px;因为它必须伸展！这就是为什么大多数解决方案都无法正常工作的原因！

好的，我有一个问题。如果有足够的内容，我的页脚就能很好地粘贴到页面的底部，但是当我只有几行内容时，页脚下会有一个空白区域。图片：

>

（来源： http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ）

页面我从提供的解决方案中获得了该图像，但它对我无效。因为我的页脚必须是动态的（我不知道像素或任何其他高度，div只是延伸页脚内容的数量）。

所有我发现的解决方案需要页脚的指定高度......我怎样才能让页脚停留在页面底部？

我的div看起来像像这样：

 < div class =mobile_main> 
< div class =header> 
 Stuff 
< / div> 
< div class =body_main> 
 Stuff 
< / div> 
< div class =footer_mobile> 
 Stuff 
< / div> 
< / div> 
  

主div内的所有3个div都按内容拉伸（没有指定高度）。

有没有人有解决方案？

解决方案

位置在mobile_main容器div的左下角。所以你也应该给这个容器一个相对的位置。

http://jsfiddle.net/kasperfish/FQ6fG/5/

  .mobile_main {
位置：相对; 
} 
 .body_main {
 background：grey; 
 min-height：300px; 
 
} 
 .footer_mobile {
 width：100％; 
位置：绝对; 
 bottom：0px; 
 left：0px; 
 background：lightblue; 
 
} 
 .header {
 background：yellow; 
} 
  

EDIT: BEFORE YOU ANSWER, READ THIS! I can't set footer like "height: 30px;" because it has to stretch! That's why most solutions don't work!!

Okay so I have a problem. My footer sticks well to the bottom of the page if there's enough content, but when I have only a few lines of content, there's a white space under the footer. Picture:

(source: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)

The page which I got that image from offered one solution, but it doesn't work for me. Because my footer needs to be dynamic (I don't know the height in pixels or whatsoever, the div just stretches by the amount of content placed in footer)

All of the solutions I've found need a specified height for the footer... How could I get the footer to stay at the bottom of the page?

My divs look something like this:

<div class="mobile_main">
    <div class="header">
        Stuff
    </div>
    <div class="body_main">
        Stuff
    </div>
    <div class="footer_mobile">
        Stuff
    </div>
</div>

All the 3 divs inside the main divs are stretching by content (no height specified).

Does anyone have a solution?

解决方案

you could give the footer an absolute position at the bottom left corner of the mobile_main container div. therefore you also should give this container a relative position.

http://jsfiddle.net/kasperfish/FQ6fG/5/

.mobile_main{
    position:relative;
}
.body_main{
    background:grey;
    min-height:300px;

}
.footer_mobile{
    width:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    background:lightblue;

}
.header{
    background:yellow;
}

这篇关于将页脚粘贴到页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！