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

你缺少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>

现在它可以按你的需要工作。这是小提琴

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

看看div我设置身高和最小高度为100％。现在把你的内容放在这个div中，它会正常工作。

Answer 2

删除包装器并将其添加到css中：

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

页脚粘贴到底部，具有自适应布局（Bootstrap）

2 个答案: