页脚位于页面底部或内容底部（以较低者为准）

Question

我有以下结构：

我使用jav

P粉344355715 · Answer

Ryan Fait 的粘性页脚是一个简单的解决方案，我过去曾多次使用过。

基本 HTML：


    
        CSS Sticky Footer

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

将其翻译为类似于您已经得到的结果，大致如下：

HTML：

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

只是不要忘记更新包装边距上的负数以匹配页脚和推送 div 的高度。祝你好运！

P粉970736384 · Answer

Ryan Fait 的粘性页脚是非常好，但是我发现它缺乏基本结构*。

Flexbox 版本

如果您足够幸运，可以使用 Flexbox 而无需支持旧版浏览器，那么粘性页脚就会变得非常简单，并且支持动态调整大小的页脚。

使用 Flexbox 让页脚粘在底部的技巧是让同一容器中的其他元素垂直弯曲。它所需要的只是一个带有 display: flex 的全高包装元素和至少一个 flex 值大于 0 的同级元素： p> CSS：子>

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}


   
     here be header
   
   
   
   
     here be content
   
   
     here be footer