页脚没有停留在底部

时间:2015-05-27 14:44:42

标签: html css twitter-bootstrap

这似乎是有史以来最令人困惑的问题,至少对我而言。知道这个页面,除了标题之外 - 我已经复制了HTML并试图小心地删除与WordPress相关的爵士乐,以便你获得该页面的html。

JsBin Live Page

我希望您关注的是页脚中间的页脚。我删除了position:absolute,它向下移动......它需要停留在页面的底部。

is position:fixed这是它留在底部的唯一方式,但看看页脚如何跟随你? 我不希望

你可能会说,做min-height: 100%这不是我想要的,因为那时高度为100%的容器,行和列类都不起作用。

我想要完成的是:this type of layout.但是你可以看到页脚骑了...

是的,我也尝试了position:relative check out position:Relative

因此,您可以看到我也链接到您的Live页面,从互联网上阅读的每一个内容都是实现this type of layout.的正确方法,我一定要做错事......

更新1

在你建议我丢失div之前,我已经通过div检查器验证了所有我的例子并且div是正确的。我没有错过任何div。这是纯css问题

在你标记x,y和z的副本之前 - 我提供了三个我尝试过的职位的例子,但没有一个有效:

最后,如上所述,包装器(或任何其他元素)上的min-height: 100%作为答案是不可接受的,除非您可以指定我如何实现this type of layout.

3 个答案:

答案 0 :(得分:1)

我通常这样做的方法是添加位置:相对于html和position:绝对到页脚本身。

你必须为身体设置margin-bottom = footer-height

的主要缺点
((0[1-9]|1[0-9]|2[0-8])(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec))|
((30|29)(Jan|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec))|
((31)(Jan|Mar|May|Jul|Aug|Oct|Dec))

查看结果https://jsfiddle.net/jy0gsgm4/

答案 1 :(得分:0)

移除高度:100%来自包装器会停止页脚下方的间距。 发生这种情况是因为总高度是100%包装和导航栏的高度。我建议将导航栏放入包装器div中。

答案 2 :(得分:0)

我是这种方法的粉丝。

display: inline-block;

非常自我解释。 HTML (演示)

<div class="verycoolwrapper">

<!-- tons of cool stuff on page -->

    <footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>

</div><!-- // end wrapper -->

CSS:(演示)

.verycoolwrapper { 
    width: 960px;
    background: pink;
    margin: 0 auto;
    position: relative; // child elements relative to this, no height needed
}

#footerstay { 
   // your styles
   width: 100%;
   height: 150px;
   background: #ccc;
   display: inline-block;
}

另外,交替;明确浮动应该适合你。