这似乎是有史以来最令人困惑的问题,至少对我而言。知道这个页面,除了标题之外 - 我已经复制了HTML并试图小心地删除与WordPress相关的爵士乐,以便你获得该页面的html。
我希望您关注的是页脚中间的页脚。我删除了position:absolute
,它向下移动......它需要停留在页面的底部。
这is position:fixed
这是它留在底部的唯一方式,但看看页脚如何跟随你? 我不希望。
你可能会说,做min-height: 100%
这不是我想要的,因为那时高度为100%的容器,行和列类都不起作用。
我想要完成的是:this type of layout.但是你可以看到页脚骑了...
是的,我也尝试了position:relative
: check out position:Relative
因此,您可以看到我也链接到您的Live页面,从互联网上阅读的每一个内容都是实现this type of layout.的正确方法,我一定要做错事......
在你建议我丢失div之前,我已经通过div检查器验证了所有我的例子并且div是正确的。我没有错过任何div。这是纯css问题
在你标记x,y和z的副本之前 - 我提供了三个我尝试过的职位的例子,但没有一个有效:
最后,如上所述,包装器(或任何其他元素)上的min-height: 100%
作为答案是不可接受的,除非您可以指定我如何实现this type of layout.
答案 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))
答案 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;
}
另外,交替;明确浮动应该适合你。