CSS使页面页脚保持在页面底部的最小高度,但不与页面重叠

一个非常简单的方法,适用于跨浏览器,这是:

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

HTML

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

从IE7开始,您可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

请参阅caniuse获取支持.

我用它来将我的页脚粘到底部,它对我有用:

HTML

这是您必须在HTML中进行的唯一修改,将其添加div到"allButFooter"类中.我用所有页面做了这些,那些那么短,我知道页脚不会粘到底部,而且页面也足够长,以至于我已经知道我必须滚动.我这样做了,所以我可以看到它在页面内容是动态的情况下工作正常.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

本"allButFooter"类有一个min-height依赖于视口的高度值(100vh指视口高度的100%)和页脚的高度,我已经知道了40px.

这就是我所做的一切,它对我来说非常有效.我没有在每个浏览器中尝试过它,只有Firefox,Chrome和Edge,结果就像我想要的那样.页脚粘到底部,您不必弄乱z-index,position或任何其他属性.我的文档中每个元素的位置是默认位置,我没有将其更改为绝对或固定或任何东西.

使用响应式设计

这是我想清楚的事情.这个解决方案具有相同的40px高的Footer,当我在使用响应式设计工作时没有像我预期的那样工作Twitter-Bootstrap.我不得不修改我在函数中减去的值:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为Twitter-Bootstrap它有自己的边距和填充,所以这就是我必须调整该值的原因.

我希望这对你们有用!至少,这是一个简单的尝试解决方案,它不涉及对整个文档进行大的更改.

我使用的简单解决方案适用于IE8 +

在html上给出min-height:100%,这样如果内容少了,那么页面底部会占据完整的视口高度和页脚.当内容增加时,页脚会随着内容向下移动并保持坚持到底.

JS小提琴演奏演示:http://jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

然而,另一个非常简单的解决方案就是这个:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

的jsfiddle

诀窍是使用display:table整个文档,并display:table-row与height:0页脚.

由于页脚是唯一具有显示效果的正文子table-row,因此它会在页面底部呈现.

需要注意的一件事是移动设备,因为它们以"不寻常"的方式实现了视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用position: fixed;(正如我在其他地方推荐的那样)通常不是可行的方法.当然,这取决于你所追求的确切行为.

我使用过的,在桌面和移动设备上运行良好的是:

同

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}

做这个

您还可以阅读所有现代浏览器都支持的flex

更新:我读了关于flex并试了一下.它对我有用.希望它能为你做同样的事情.这是我实现的方式.这里的主要部分不是ID,而是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里,您可以阅读有关flex的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住,旧版本的IE不支持它.

这被称为粘性页脚。一个谷歌搜索它来了一个很大的成果。我已经成功使用了CSS Sticky Footer。但是还有更多。

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

的HTML：

    
        
    
    
        

            
Your website content here.
            

        
        

            
Copyright (c) 2008
        
    

此代码的来源

我只是在这里回答类似的问题：

页脚位置固定在页面底部

我是Web开发领域的新手，我知道这已经得到了答案，但这是我发现的最简单的解决方法，我认为这有所不同。我想要一些灵活的东西，因为Web应用程序的页脚具有动态高度，因此我最终使用了FlexBox和spacer。

首先设置HTML和正文的高度

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

.spacer {
    flex: 1; 
}

  
    
 Header 
    Some content...