頁腳位於頁面底部或內容底部（以較低者為準）

Question

我有以下結構：

< /body>我使用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