javascript - CSS 将固定页脚对齐到主体最小高度的底部

Question

任何人都可以建议是否有办法保持固定页脚不超过内容的最小高度？ (因此，如果内容的最小高度高于浏览器窗口(视口(viewport))，则固定页脚将保持在最小高度之上，否则如果视口(viewport)更高，则页脚应固定在底部)

我想这只能使用 JS/jQuery 来实现。如果有人能告诉我如何实现这一点，我会很感激。

html, body {
   height: 100%;
   min-height: 800px;
   width: 100%;
   margin: 0;
   padding: 0;
}
header {
   width: 100%;
   height: 50px;
   background: blue;
   position: fixed;
   top: 0;
}
#content {
   width: 85%;
   margin: 0 auto;
   padding: 50px 0;
}
footer {
   width: 100%;
   height: 50px;
   background: blue;
   position: fixed;
   bottom: 0;
}

FIDDLE Example

在我的例子中，无论最小高度是多少，页脚总是贴在浏览器的底部。

Answer 1

对不起，我误解了你之前的问题。也许这就是您要找的东西？

* {
      margin: 0;
    }
    html, body {
      min-height: 400px;
      height: auto;
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }
    header {
      width: 100%;
      height: 50px;
      background: blue;
      position: fixed;
      top: 0;
    }
    #content {
      width: 85%;
      margin: 0 auto;
      padding: 50px 0;
    }
    footer {
      width: 100%;
      height: 50px;
      background: blue;
      position: absolute;
      bottom: 0;
    }

JSFiddle example