页脚通过自适应布局固定在底部 (Bootstrap)

Question

我无法将页脚固定在底部。我遵循经典包装器的想法，使用一个空的 div 将页脚推到底部。这是我的代码：

HTML

<html>
    <body>
        <section class="wrapper">
            <!--main content-->
            <div class="push"></div>  
        </section>

        <footer class="footer">
            <div class="container">
                <!--footer content-->
            </div>
        </footer>
    </body>
</html>

CSS

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -13em;
}

.push {
    height: 13em;
    clear: both;
}

.footer{        
    padding: 20px 0;
    width: 100%;
    clear: both;
}

我使用 13em 作为高度和边距尺寸，因为这是中型和大型屏幕的尺寸。此代码有效，但当布局必须适应超小和小尺寸时，问题就开始了。事实上，当屏幕变小时，页脚的高度会增加。

所以我的问题是：如何为 .push div 和包装器的边距设置动态高度？我希望这些值等于页脚高度。

我也尝试了一些 javascript 但没有成功。

P.s。请不要告诉我为页脚设置静态高度（例如 13em），因为正如我所说，我想要一个自适应高度。

更新

我想要这样的东西：http://ryanfait.com/html5-sticky-footer/

Answer 1

移除包装并将其添加到您的 css 中：

.footer    {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

Answer 2

你在html中遗漏了一个重要的部分，正文内容，没有内容。我加了个带高度的div看看

<body>
    <section class="wrapper">
        <!--main content-->
        <div class="push"></div>  
    </section>
    <div style="height:100%;min-height:100%;"></div>
    <footer class="footer">
        <div class="container">
            <!--footer content-->
        </div>
    </footer>
</body>

现在一切如你所愿。这是 fiddle

https://jsfiddle.net/wgrLfxg3/12/

看看 div 我将高度和最小高度设置为 100%。现在将您的内容放入此 div 中，它将正常工作。

页脚通过自适应布局固定在底部 (Bootstrap)

Footer stick to bottom with adaptative layout (Bootstrap)

html

javascript

css

footer

twitter-bootstrap