Question

在我解释这个问题之前，请允许我说我在google上搜索了很多内容并阅读了几个堆栈溢出回复，除了尝试解决问题之外，它还不太有效。

另一个脚html问题，但我似乎没有找到我的问题的答案，即使似乎有很多关于这个的问题，它要么是没有解释的真正奇怪的解决方案，要么是如果你添加的解决方案不起作用示例另一个表单到同一页面上的网站（页脚位于布局框边框线下方）。

我试图创建页脚以使其粘在文档的末尾，我尝试了以下内容：

margin-top: 100px

确实有效，直到我向页面添加更多内容，页脚被推到布局边界线下方。然后我尝试将页脚设置为位置相对位置：relative，但只是将页脚保持在页面中间。

我的css代码：

.box {
background-color: white ;
height: 800px ;
width: 600px ;
margin: 0px auto ;
border: 1px solid black ;
}

.header {
    text-align: center ;
    padding-left: 5px ;
}

.navigation {
text-align: center ;
font-size: 16px ;
font-family: verdana ;
}

.content {
font-size: 18px ;
font-family: verdana ;
padding-left: 10px ;
}

.contactForm {
font-size: 16px ;
font-family: verdana ;
}

.footer {
margin-top: 100px ;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="testing.css" type="text/css">
</head>
<body bgcolor="#f6f6f6">
    <div class="box">
        <h3 class="header">My blog</h3>
        <hr/>
    <div class="navigation">
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <hr/>
    <div class="content">
        <form class="contactForm" action="#" method="post">
            <table>
                <tr><td>Contact</td></tr>
                <tr><td>Name:</td><td><input type="text" name="name"></td></tr>
                <tr><td>E-mail:</td><td><input type="text" name="email"><td></tr>
                <tr><td>Message:</td><td><input type="textarea" name="message"></td></tr>
                <tr><td><input type="submit" name="submit"></td></tr>
            </table>
        </form>
    </div>
    <div class="footer">
        test
    </div>
</body>
</html>

似乎什么都没有用，我得说我开始有点沮丧，因为我已经阅读了几篇关于此的指南和文章，但是很多人只是说我必须设置宽度，高度和相对位置，并没有显示你如何正确定位它们。

有人可以解释如何创建一个合适的页脚吗？如果对代码有解释也会很好。

Answer 1

<强> CSS position:fixed;应该做到这一点。

.footer{
    position: fixed;
    text-align: center ;
    font-size: 16px ;
    font-family: verdana ;
    width: 600px ;
    height: 50px ;
    background-color: #f6f6f6 ;
}

小提琴：http://jsfiddle.net/pXBpc/1/

Answer 2

看起来你有一个开放的div开始，这将无济于事。

变化：

<div class="box">
<h3 class="header">My blog</h3>
<hr/>

到

<div class="box">
<h3 class="header">My Blog</h3>
</div>

如果这没有帮助，那么您可以尝试将内容包装在容器中。我从this tutorial学到了这一点，我发现它很清楚。

Answer 3

.footer {
position:fixed;
bottom:0;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

Answer 4

使用以下代码将页脚固定到页面底部：

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:50px;
   width:100%;//or 600 pixels if you don't want it to fill the bottom of the page
   background:#999;
}

如何在html文档中创建页脚

4 个答案: