2

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

我想只能使用 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;
}

小提琴示例

在我的情况下，无论最小高度是多少，页脚总是粘在浏览器的底部。

4

3 回答 3

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 示例

于 2013-11-04T00:49:05.160 回答
0

你只需要做一件事：

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

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

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

于 2013-11-04T01:22:54.897 回答
0

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

.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/

于 2013-11-05T08:58:55.487 回答