粘性页脚文本问题 - CSS答案

【问题标题】：Sticky footer text issue - CSS粘性页脚文本问题 - CSS
【发布时间】：2014-04-25 15:08:49
【问题描述】：

我在使用粘性页脚（停留在页面底部的页脚）时遇到了一些问题。页脚中的实际文本将浮动到页面底部，但背景不会。我已经查看了一些最重要的建议问题，但它们与我的问题不符。例如：

从较小的屏幕查看时，页脚停留在底部时遇到问题。或者另一个用户的 html 标记都很奇怪。我相信我遵循了正确的 html，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head></head>
    <body>
        <div id="header_container"></div>
        <div class="line_seperator"></div>
        <div id="header_text_container"></div>
        <div class="line_seperator"></div>
        <div id="outside_container"></div>
        <div id="footer_container_new"></div>
        <script type="text/javascript"></script>
    </body>

</html>

而且我相信我的 css 是正确的，如下所示：

html, body{
    height:100%;
}

body {
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family: Helvetica, sans-serif;
    color:black;
    background:url('../images/background3.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

#outside_container {
    padding-bottom:10px;
    min-height: 100%;
    margin-bottom:-120px;
}

#footer_container_new {
    background: #09C;
    min-height: 120px;
    width: 100%;
}

但是我仍然从我的一种表格中得到重叠，如下所示：

http://www.verney.ca/pbd2014/registration/index.php

任何帮助将不胜感激！

【问题讨论】：

P.S. line_seperator 不包含实际信息，它只是一个拆分内容的 div。它的样式没有任何方式。
尝试将像素更改为 %，因为 % 会根据屏幕大小进行调整。希望是这样吗？
嗨，布伦丹，感谢您的评论。正如下面詹姆斯所建议的那样，我没有清除页脚容器中的两个

标签： css

【解决方案1】：

尝试将clear 添加到页脚容器中。

#footer_container_new {
    background: #09C;
    min-height: 120px;
    width: 100%;
    clear:both;
}

【讨论】：

感谢工作。不过，我将如何在元素之间创建一点点空间呢？在注册页面上，表单基本上是接触页脚
要在表单和页脚之间添加一个空格，请尝试进行以下更改#outside_container{min-height:100%; /* Remove this line and add the below styels */, width: 100%; overflow:auto;}。现在删除空的div 和padding:10px;，并根据需要调整表单和页脚之间的空间，调整#outside_container 的margin-bottom。