Question

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

从较小的屏幕上看，页脚停留在底部时出现问题。或者另一个用户的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

任何帮助将不胜感激！

Answer 1

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

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

粘滞页脚文本问题 - CSS

1 个答案: