Question

我试图让页脚粘在我的网页底部，但它只漂浮了一半。我看了几个例子，我不知道我做错了什么。任何帮助将不胜感激。我的简化代码如下所示。

<html>
<head>
</head>

<body>
    <div id = "wrapper">
        <!--Wrapper div for the main content-->
    </div>
        <!--Footer container-->
    <div class="footer">    
    </div>
</body>

</html>


--CSS-- 

body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;

}

#wrapper{
min-height: 100%;
}

.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}

Answer 1

如果您希望它位于document：

的底部

.footer {
    position: absolute;
    bottom: 0;
}

如果您希望它位于视口的底部：

.footer {
    position: fixed;
    bottom: 0;
}

Answer 2

如果您希望页脚div位于页面底部并跨越整个宽度，则可以使用：

.footer {
    position: absolute;
    bottom:0;
    height: 150px;
    width: 100%;
    background-color: #232A3B;
}

HTML5还支持the <footer> Tag，这可以让机器人更轻松地处理您网页上的信息。要更改它，只需使用footer {而不是.footer {并更改HTML标记。

网站页脚不会粘在页面底部

2 个答案: