1

首先，为看似非常常见的问题道歉，看看类似问题的数量，你对另一个问题感到恼火是可以原谅的，但不管我读过的所有其他问题（并试图实施），还有很多在谷歌上找到的其他链接，我仍在努力解决我的问题，所以很抱歉，但是这里..

当主要内容比浏览器窗口长时，我的页脚很好，但是当内容很少时，而不是粘在浏览器窗口的底部，而是粘在主要内容的底部，留下一个可怕的空白页脚下方的空间。

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

<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 答案的尝试让我要么没有页脚，要么页脚位于屏幕中央，无论有很多还是很少内容。

任何帮助将不胜感激。

4

3 回答 3

2

我以前回答过这个问题

点击这里

或者查看这个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;}

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

于 2013-04-15T14:57:45.010 回答
1

你有没有尝试过：

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

这是一个有效的DEMO1

更新：

我在您的代码中更改了一些内容，但现在可以正常工作了！

以下是更改：

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

演示2

于 2013-04-15T13:46:55.393 回答
0

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

如果可以，请尽量接近这一点，它与旧版浏览器兼容。

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

于 2013-04-15T14:06:00.173 回答