Css 如何使页脚保持在网页底部？

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

要获得粘性页脚：

为您的内容准备一个带有

class=“wrapper”

的

右在

包装的关闭
之前放置

右在

包装的关闭
后放置

*{
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
最小高度：100%；
高度：自动！重要；
身高：100%；
边距：0自动-142px；/*底部边距是页脚高度的负值*/
}
.footer、.push{
高度：142px；/*.push必须与.footer的高度相同*/
}

尝试在内容和侧边栏周围放置一个容器div（带overflow:auto）

---

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

一种解决方案是设置框的最小高度。不幸的是（令人惊讶）。

将

#页脚的CSS设置为：

位置：绝对位置；
底部：0；

然后，您需要在
#侧边栏和
#内容的底部添加
填充
或
边距
，以匹配
#页脚
的高度，或者当它们重叠时，
#页脚
将覆盖它们

另外，如果我没记错的话，IE6在
bottom:0
CSS中有一个问题。您可能必须为IE6使用JS解决方案（如果您关心IE6的话）。
您可以使用
位置：绝对
将页脚放在页面底部，但随后确保您的两列具有适当的
页边距底部
，这样它们就不会被页脚遮挡

#页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
}
#内容，#侧边栏{
边缘底部：5em；
}
这些纯css解决方案都不能正确处理动态调整内容大小的问题（至少在firefox和Safari上是如此），例如，如果您在容器div上设置了背景，然后在div内调整（添加几行）表的大小，则该表可能会伸出样式区域的底部，即。，因为字体颜色和背景颜色都是白色的，所以在黑色主题中，可以有一半的表格是白色的，一半的表格是完全白色的。它基本上不适用于浏览器页面

嵌套div多列布局是一个丑陋的缺陷，用于粘贴页脚的100%最小高度的body/container div是一个更丑陋的缺陷

在我尝试过的所有浏览器上，唯一一个无脚本的解决方案是：一个更简单/更短的表，带有ad（用于页眉）/tfoot（用于页脚）/tbody（用于任意列数的td）和100%高度。但是这已经意识到了语义和SEO的缺点（tfoot必须出现在tbody之前。不过，ARIA角色可能有助于体面的搜索引擎）。
这里有一个jQuery的解决方案，效果非常好。它检查车窗高度是否大于车身高度。如果是，则会更改页脚顶部的边距以进行补偿。在Firefox、Chrome、Safari和Opera中测试

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果页脚已经有页边空白顶部（例如，50像素），则需要更改以下内容的最后一部分：

css( 'margin-top', height_diff + 50 )

使用绝对定位和z索引，使用以下步骤以任意分辨率创建粘性页脚div：


使用
位置：绝对值创建页脚div；底部：0和所需高度

设置页脚的填充以在内容底部和窗口底部之间添加空白
创建一个容器
div
，该容器用
位置：相对包装正文内容；最小高度：100%

将底部填充添加到主内容
div
，该填充等于页脚的高度加上填充
如果页脚被剪裁，则将页脚的
z-index
设置为大于容器
div

以下是一个例子：



粘脚
.wrapper{位置：相对；最小高度：100%；}
.footer{位置：绝对；底部：0；宽度：100%；高度：200px；填充顶部：100px；背景色：灰色；}
.列{高度：2000px；填充底部：300px；背景色：grxqeen；}
/*对于IE6，将“html”、“body”和容器“div”设置为“height:100%”*/
你好
这是一个测试。这只是一个测试

使用CSS vh单元！
可能最明显和非黑客的方式来处理一个粘性的页脚将是利用新的

以以下简单标记为例：

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

这意味着：让内容div的高度至少为视口高度减去页眉和页脚组合高度的100%

就这样


*{
保证金：0；
填充：0；
}
标题{
背景：黄色；
高度：80px；
}
.内容{
最小高度：计算（100vh-120px）；
/*80px页眉+40px页脚=120px*/
背景：粉红色；
}
页脚{
高度：40px；
背景：水；
}
标题在这里
这个页面内容很少
这是我的页脚
CSS:

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

HTML:



如果你要寻找一个在页面底部对齐的响应性页脚，它的上边距始终保持在视口高度的80%，那么这应该可以解决这个问题。
很多人都在这里给出了这个简单问题的答案，但是我有一件事要补充，考虑到在我弄明白我在做什么之前我是多么沮丧
  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

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

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

//import jQuery library before this script

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

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

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

@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;
    }
}

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

#my_footer {
    position: static
    fixed; bottom: 0
}

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

display: flex;
flex-direction: column;
flex: 1;
min-height: 100vh;

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>
    

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}
    

position: fixed;