Html 如何在html文档中创建页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20356023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a footer in html document
提问by JustHannah
Before I explain the problem, just let me say that I have searched quite a bit on google and read several stack overflow replies in addition to trying stuff out, it doesn't quite work.
在我解释这个问题之前，让我说我已经在谷歌上搜索了很多并阅读了几个堆栈溢出的回复，除了尝试一些东西之外，它不太有效。
Another foot html question, but I don't seem to find the answer to my question even though there seems to be many questions about this, its either really odd solutions without explanations or solutions that doesn't work if you add for example another form to the site on the same page (footer goes below the layout box border line).
另一个足部 html 问题，但我似乎没有找到我的问题的答案，尽管似乎有很多关于此的问题，它要么是没有解释的非常奇怪的解决方案，要么如果您添加例如另一种形式，则解决方案不起作用到同一页面上的站点（页脚位于布局框边框线下方）。
Im trying to create the footer to have it stick at the end of the document, ive tried the following:
我正在尝试创建页脚以将其粘贴在文档末尾，我尝试了以下操作：
margin-top: 100px
well that did work until I added more content to the page, the footer is pushed below the layout border line. Then I tried setting the footer as a relative position with position: relative but that just kept the footer on the middle of the page.
在我向页面添加更多内容之前，这确实有效，页脚被推到布局边框线下方。然后我尝试将页脚设置为带有 position: relative 的相对位置，但这只是将页脚保持在页面的中间。
My css code:
我的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 ;
}
my html code:
我的 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>
Nothing seems to work and I got to say I'm starting to get kind of frustrated since I've been reading several guides and articles about this, but a lot of them just says that I have to set the width, height and the position to relative and doesn't show how you position them correctly.
似乎没有任何效果，我不得不说我开始有点沮丧，因为我已经阅读了几篇关于此的指南和文章，但很多人只是说我必须设置宽度、高度和位置相对并没有显示您如何正确定位它们。
Can someone explain how to create a proper footer ? Would be nice if there was an explanation to the code as well.
有人可以解释如何创建合适的页脚吗？如果对代码也有解释，那就太好了。
回答by Ani
CSSposition:fixed;should do the trick.
CSSposition:fixed;应该可以解决问题。
.footer{
position: fixed;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}
Fiddle: http://jsfiddle.net/pXBpc/1/
回答by JustHannah
It looks like you've got an open div to start with, which won't be helping things.
看起来你有一个开放的 div 开始，这不会有帮助。
Change:
改变：
<div class="box">
<h3 class="header">My blog</h3>
<hr/>
to
到
<div class="box">
<h3 class="header">My Blog</h3>
</div>
If that doesn't help then you can try wrapping the content in a container. I learned that from this tutorialwhich I found pretty clear.
回答by Kuzgun
.footer {
position:fixed;
bottom:0;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}
回答by 2kreate
Use the following code to fix the footer to the bottom of your page:
使用以下代码将页脚固定到页面底部：
.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;
}
