Question

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

我想只有使用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

Answer 2

你只需要做一件事：

.footer {
    width: 100%;
    height: 50px;
    background: blue;
    position: fixed;
    /* the change is here */
    top: 800px;
}

但通过这种方式你的页脚将不会显示！否则使用分辨率高度大于800px的大屏幕。我的笔记本电脑屏幕只有768像素！要不使用Javascript，您必须制作大量的css媒体查询规则取决于可能的屏幕分辨率

http://jsfiddle.net/Dcsf3/3/

Answer 3

我不确定，但也许你想要这样的东西？

.b-footer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 600px;
}

    .b-footer__l {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

footer {
    width: 100%;
    height: 50px;
    margin-top: -50px;
    background: blue;
    position: fixed;
}

http://jsfiddle.net/3hcCu/

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

3 个答案: