Question

说我的页面应该是以下“模板”：

enter image description here

我的网页包含标题，内容部分（每页不同）和页脚。页面高度是标题高度+内容高度+页脚高度。注意页脚的高度;它很高/很健壮。我很好。

我不想要一个“粘性”页脚，而是寻找以下功能：

如果标题高度+内容高度大于视口/窗口高度，我不希望页脚在用户向下滚动到它之前可见（正常的页脚行为）;但是...
如果页眉高度+内容高度+页脚高度小于视口/窗口高度，我希望页脚固定在视口底部。这意味着如果特定页面的内容非常小或者甚至是空的，我希望我的标题固定在窗口的顶部，页脚固定在底部。

Example in jsFiddle

我需要做些什么才能更改我的footer div以展示所需的行为？

<!-- What needs to change here? -->
<div class="footer ">
    This should always be shown at the bottom if there isn't a lot of content to display below the header.
</div>

Answer 1

我认为粘性页脚完全你想要的东西（只是fixed页脚）

直接从维基获取sticky-footer：

Sticky Footer是一种CSS技术，用于将页脚部分锚定到页面底部，而不管页面的高度如何。当页面高度小于视口时，粘滞页脚将位于视口的底部，当页面高度超过视口时，粘滞页脚将位于页面的底部。

这是规范的粘性页脚实现：
http://ryanfait.com/html5-sticky-footer/

这是一个简单的例子：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

.footer {
  background: yellow;
}

如果你想使用bootstrap，只需添加bootstrap CSS和你想要的任何其他类

Simple Demo in Plunker

Bootstrap Demo in Plunker

Answer 2

这是另一个简单的解决方案

<强> HTML

    <body>
    <header>
     ....
    </header>
    <div class="container" role="main">
     ....
    </div>
    <footer>
     ....
    </footer>
    </body>

<强> JS

(function ($) {

        var height = $('footer').height();
        //update the  value when page is loaded
        $(document).ready(function () {
        $('body').css({"margin-bottom" : height });

        });

        //update the  value when the browser is resized (useful for devices which switch from portrait to landscape)
        $(window).resize(function () {
        $('body').css({"margin-bottom" : height });
        });

    })(jQuery);

<强> CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
[role="main"] {
    padding-bottom:30px;
}

使用Bootstrap停靠页脚

Example in jsFiddle

2 个答案:

Simple Demo in Plunker

Bootstrap Demo in Plunker