Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <style>
        html, body, #container {
            height:100%;
        }

        #container {
            height:auto;
            min-height:100%;
            position:relative;
        }
    </style>
        <body>
            <div id="container" style="background-color:#0000FF;">body</div>
            <div style="background-color:#FF0000;height:100px;">footer</div>
        </body>
</html>

JFiddle：http://jsfiddle.net/hnz1ys27/

如何隐藏滚动条并使页脚粘到页面底部？在我的代码中，页脚在页面底部进入BELLOW，用户必须滚动，尽管只有一行主体。

Answer 1

您的网页需要<head></head>，您应该在其中插入您的css代码。以下是使用JFriddle的正确方法：http://jsfiddle.net/hnz1ys27/3/

要使页脚粘到底部，您可以使用以下位置：绝对;和底部：0px;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <!-- Your page do not have a head -->
    <head>
        <style>
            body{
                padding: 0px;
                background-color:blue;
            }
            #container{
               background-color:green;
            }
            #footer {
               position:absolute;
               left:0px;
               bottom:0px;
               width: 100%;
               background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="container">This is my body</div>
        <div id="footer">This is my footer</div>
    </body>
</html>

编辑：容器底部的页脚：http://jsfiddle.net/hnz1ys27/5/

CSS页脚 - 身体错误

1 个答案: