Question

首先，对看起来是一个非常常见的问题道歉，看一下类似问题的数量，你对另一个问题感到懊恼，但不管我读过的所有其他问题（并试图实施），以及谷歌上发现的许多其他链接，我仍然在努力解决我的问题，所以我很抱歉，但是这里有...

当主要内容比浏览器窗口长时，我所拥有的页脚很好，但是当内容非常少时，它不会粘在浏览器窗口的底部，而是粘在主要内容的底部，留下页脚下方有一个可怕的空白区域。

我使用我的代码的精简版创建了一个简单的（ish）小提琴HERE ..这里是那些能够在没有“摆弄”的情况下看到问题的代码..

<body>
    <!-- Header -->
    <div id="header-wrapper">
        <header class="5grid-layout" id="site-header">
            <div class="row">
                <div class="12u">
                    <div id="logo">
                            <h1 class="mobileUI-site-name">HEADER</h1>

                    </div>
                </div>
            </div>
        </header>
    </div>
    <!-- Main -->
    <div id="main-wrapper" class="subpage">
        <div class="5grid-layout">
            <div class="row">
                <div class="12u">MAIN CONTENT </div>
                          </div>
        </div>
    </div>

    <!-- Footer -->
    <div id="footer-wrapper">
        <footer class="5grid-layout" id="site-footer">
            <div class="row">
                <div class="12u">PROBLEM FOOTER</div>
            </div>
        </footer>
    </div>
</body>

这里是css ..

#header-wrapper {
    background: #12ff00;
    height: 110px;
    position: relative;
    padding: 0.0em 0 1em 0;
}
#main-wrapper {
    border-top: 3px solid #662d91;
    border-bottom: 3px solid #662d91;
    background: #ff5a00;
    position: relative;
    padding: 1em 0 2em 0;


}
#footer-wrapper {
    background: #ff00fc;
    position: relative;
    padding: 1em 0 1em 0;
    height: 100px;

}

当然，为了这个演示，不需要上面的很多Div，但是我把它们留在了以防万一它是造成这个问题的原因之一。我还是新手，所以老实说我不知道。

所以基本上，我怎么能让这个页脚行为，以前基于其他Stack Overflow答案的尝试让我没有页脚，或者是一个位于屏幕中心的页脚，无论是否有很多或很少的内容。

将非常感激地收到任何帮助。

Answer 1

我之前已经回答了这个问题

Click Here

或者查看此JSFiddle以获取粘性页脚的工作示例。

HTML

<div class="wrapper">
   <div class="header"></div>     
</div>      
<div class="footer"></div>

CSS

* {margin: 0;}
html, body {height: 100%;}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}

.footer { height: 200px;background-color:#000;}

这个想法是底部边距是页脚高度的负值

Answer 2

你试过了吗？

html, body {
   height: 100%;
   min-height: 100%;
}
#main-wrapper {
   height:100%;
}

这是一个有效的 DEMO1

更新

我在代码中更改了一些内容，但现在它正在运行！

以下是更改：

为标题和主要div添加了#container。
我已将页脚padding从em更改为px，因为我需要精确的高度。
我将main-wrapper的背景提供给#container
以border-bottom为页脚border-top

<强> DEMO2

Answer 3

我ussualy这样做的方式是使用 http://www.cssstickyfooter.com/using-sticky-footer-code.html

如果可以的话，尽量贴近它，它与旧浏览器兼容。

我没有找到更好的替代方案，并且得到了很好的解释

粘性页脚问题..这是另一个问题

3 个答案:

更新