我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。


当前回答

我自己有时也与此斗争,我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。 我只是胡乱摆弄了一下,我个人发现这是有效的,而且这当然是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS,然后编写您的HTML

其他回答

div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; } <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置,这意味着即使页面被滚动,它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

在我的网站上,我总是使用:

position: fixed;

...在我的CSS页脚。将它固定在页面底部。

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果你正在寻找一个在页面底部对齐的响应性页脚,它总是保持视口高度的80%的上距,那么这个方法应该是有用的。

我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS

它使用起来很简单。在包含库之后,只需调用这行代码。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

页脚可以通过使用不同的参数/id调用上面的函数来动态更改。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注意:-你不必改变或添加任何CSS。库是动态的,这意味着即使屏幕在加载页面后调整大小,它也会重置页脚的位置。我创建了这个库,因为CSS解决了这个问题,但当显示的大小发生显著变化时,从台式机到平板电脑或反之亦然,它们要么重叠的内容,要么不再保持粘性。

另一种解决方案是CSS媒体查询,但你必须为不同大小的屏幕手动编写不同的CSS样式,而这个库自动工作,并由所有基本的JavaScript支持浏览器支持。

编辑 CSS解决方案:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

现在,如果显示的高度超过你的内容长度,我们将使页脚固定在底部,如果不是,它将自动出现在显示的最后,因为你需要滚动来查看它。

而且,它似乎是一个比JavaScript/库更好的解决方案。

尝试在内容和侧栏周围放置容器div(带有overflow:auto)。

如果这不起作用,您是否有任何页脚显示不正确的截图或示例链接?