我有一个简单的2列布局，带有页脚，可清除标记中的右和左div。 我的问题是我无法在所有浏览器中都将页脚停留在页面底部。 如果内容将页脚放下，它会起作用，但并非总是如此。
更新：
在Firefox中无法正常工作。 当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时，我在页脚下方看到一条背景色。 不幸的是，这是页面的默认状态。
要获得页脚的粘性：
为您的内容添加一个和class="wrapper"。
在wrapper的关闭之前，将
。
在wrapper的关闭后立即放置
。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| * {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
} |
使用CSS vh单位！
粘贴页脚的最明显，最简单的方法可能是利用新的CSS视口单元。
以下面的简单标记为例：
1
2
3
| <header>header goes here</header>
This page has little content
<footer>This is my footer</footer> |
如果页眉的高度为80px，而页脚的高度为40px，则可以使用内容div上的一条规则创建粘性页脚：
1
2
3
4
| .content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
} |
这意味着：让内容div的高度至少为视口高度的100％减去页眉和页脚的组合高度。
而已。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| * {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
} |
1
2
3
| <header>header goes here</header>
This page has little content
<footer>This is my footer</footer> |
...这是相同的代码如何处理内容div中的许多内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| * {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
} |
1
2
3
4
5
6
| <header>header goes here</header>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<footer>
This is my footer
</footer> |
注意：
1)必须知道页眉和页脚的高度
2)旧版本的IE(IE8-)和Android(4.4-)不支持视口单元。 (我可以用吗)
3)从前，Webkit的计算规则中的视口单位存在问题。这确实是固定的(请参见此处)，所以那里没有问题。但是，如果出于某些原因要避免使用calc，则可以使用负边距和框大小填充来解决该问题-
像这样：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| * {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
} |
1
2
3
4
5
6
| <header>header goes here</header>
Lorem ipsum
<footer>
This is my footer
</footer> |
display: flex的粘性页脚
解决方案灵感来自Philip Walton的粘性页脚。
说明
该解决方案仅对以下情况有效：
-
铬≥21.0
-
Firefox≥20.0
-
Internet Explorer≥10
-
Safari≥6.1
它基于flex显示，利用flex-grow属性，该属性使元素可以在高度或宽度上增长(当flow-direction分别设置为column或row时)容器中的多余空间。
我们还将利用vh单元，其中1vh定义为：
1/100th of the height of the viewport
因此，高度100vh是告诉元素跨越整个视口高度的一种简洁方法。
这是构造网页的方式：
1
2
3
4
5
| ----------- body -----------
----------------------------
---------- footer ----------
---------------------------- |
为了使页脚贴在页面底部，您希望主体和页脚之间的空间增加到将页脚推到页面底部所需的距离。
因此，我们的布局变为：
1
2
3
4
5
6
7
8
9
| ----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
---------------------------- |
实作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
} |
1
2
3
4
5
| <body>
Hello World!
<footer class="footer"></footer>
</body> |
您可以在JSFiddle中使用它。
Safari怪癖
请注意，Safari对flex-shrink属性的实现有缺陷，该属性使项目缩小的幅度大于显示内容所需的最小高度。
若要解决此问题，您将必须在上述示例中将.content和footer的flex-shrink属性显式设置为0：
1
2
| .content { flex-shrink: 0; }
.footer { flex-shrink: 0; } |
您可以使用下面的position: absolute将页脚放在页面底部，但是请确保您的2列具有适当的margin-bottom，以使它们永远不会被页脚遮挡。
1
2
3
4
5
6
7
8
| #footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
} |
这是使用jQuery的解决方案，就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是这样，则它将更改页脚的边距顶部以进行补偿。在Firefox，Chrome，Safari和Opera中进行了测试。
1
2
3
4
5
6
7
8
| $( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
}); |
如果您的页脚已经有页边距的顶部(例如50像素)，则需要将最后一部分更改为：
1
| css( 'margin-top', height_diff + 50 ) |
将#footer的CSS设置为：
1
2
| position: absolute;
bottom: 0; |
然后，您需要在#sidebar和#content的底部添加padding或margin以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。
另外，如果我没记错的话，IE6在bottom: 0 CSS上有问题。您可能必须为IE6使用JS解决方案(如果您关心的是IE6)。
与@gcedo相似的解决方案，但无需添加中间内容即可压下页脚。我们可以简单地将margin-top:auto添加到页脚中，无论页脚的高度或上面内容的高度如何，它都将被推到页面底部。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
} |
1
2
3
4
5
| some content here
<footer class="footer">
some content
</footer> |
使用绝对定位和z-index通过以下步骤以任何分辨率创建粘性页脚div：
-
用position: absolute; bottom: 0;和所需的高度创建一个页脚div
-
设置页脚的填充以在内容底部和窗口底部之间添加空格
-
创建一个容器div，用position: relative; min-height: 100%;包装正文内容
-
在主要内容div中添加底部填充，该填充等于高度加上页脚的填充
-
如果页脚被剪切，则将页脚的z-index设置为大于容器div
这是一个例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!doctype html >
<html >
<head >
Sticky Footer
<meta charset ="utf-8">
<style >
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: green; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style >
</head >
<body >
<span >hello</span >
<p >
This is a test. This is only a test...
</p >
</body >
</html > |
尝试在内容和侧边栏周围放置一个容器div(带有overflow：auto)。
如果这不起作用，您是否有任何屏幕截图或示例链接，其中页脚显示不正确？
一种解决方案是设置盒子的最小高度。不幸的是，IE(惊奇)似乎没有很好地支持它。
这些纯CSS解决方案都不能与动态调整内容大小(至少在firefox和Safari上)正常工作，例如，如果在容器div，页面上设置了背景，然后在div内调整表的大小(添加几行)，表格可以伸出样式区域的底部，即，您可以让表格的一半变成黑色为白色主题，而表格的一半变成白色，因为字体颜色和背景颜色都是白色。这基本上是无法用themeroller页面修复的。
嵌套div多列布局是一个难看的技巧，而用于粘贴页脚的100％最小高度的主体/容器div是一个难看的技巧。
我尝试过的所有浏览器上唯一可用的无脚本解决方案：一个更简单/更短的表，其中带有thead(用于页眉)/ tfoot(用于页脚)/ tbody(td用于任意数量的列)，高度为100％。但是，这已经感觉到语义和SEO的劣势(必须在肢体之前先出现脚步。ARIA角色可能会帮助体面的搜索引擎)。
CSS：
1
2
3
4
5
6
7
8
9
10
11
| #container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
} |
HTML：
如果您要在页面底部寻找一个自适应的页脚，这应该可以解决问题，页脚始终保持视口高度的80％。
对于这个问题，我看到的许多答案都是笨拙的，难以实现且效率低下的，所以我想我会试一试，并提出自己的解决方案，该解决方案只是CSS和html的一小部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
} |
1
2
3
4
| <body>
test as body
test as footer
</body> |
这可以通过设置页脚的高度，然后使用css calc计算出页脚仍在底部时页面的最小高度来起作用，希望这对某些人有所帮助：)
我有时为此感到挣扎，并且我总是发现彼此之间所有这些div的解决方案是一个混乱的解决方案。
我只是把它弄乱了一点，我个人发现这可行，它当然是最简单的方法之一：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
} |
我喜欢的是不需要应用任何额外的HTML。您只需添加此CSS，然后随时编写HTML
由于尚未提供Grid解决方案，因此如果仅将height: 100%和margin: 0视为是对父元素的两个声明，则它是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}} |
1
2
| Content
<footer>Footer</footer> |
-
align-content: space-between
The items are evenly distributed within the alignment container along
the cross axis. The spacing between each pair of adjacent items is the
same. The first item is flush with the main-start edge, and the last
item is flush with the main-end edge.
技巧是在将底部设置为0的同时固定页脚的位置。最简单的解决方案是：
1
2
3
4
5
6
| footer {
...
width: 100%;
position: fixed;
bottom: 0;
} |
看到这里这个完整的简单示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| body {
background-color: #ccc;
margin: 0;
}
main {
width: 85%;
margin: auto;
background-color: bisque;
}
main h1 {
text-align: center;
}
article p {
padding: 5px 50px 5px 50px;
}
footer {
background-color: black;
width: 100%;
height: 50px;
text-align: center;
position: fixed;
bottom: 0;
}
footer p {
color: white;
font-size: 20px;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html >
<html >
<head >
</head >
<body >
<main >
<section >
<header >
Know me better!
</header >
<p >
Lorem , ipsum dolor sit amet consectetur adipisicing elit. Odit quis et minima similique accusamus
est error eos culpa quos natus maxime , dolorem quam voluptatibus quo quod velit neque iste non.
Consequatur provident pariatur , similique aut velit libero quasi , laudantium magnam , eos laborum
expedita quos voluptas impedit labore veniam. Neque maiores aperiam soluta quis nobis ipsum hic
tempore porro optio ad.
</p >
</article >
</section >
</main >
<footer >
<p >
Copyrighting 2019.
</p >
</footer >
</body >
</html > |
许多人在这里提出了这个简单问题的答案，但是我要补充一件事，考虑到在弄清楚自己做错了什么之前我感到多么沮丧。
如前所述，最简单的方法是这样。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
} |
但是，在职位中未提及的属性(可能是因为通常是默认属性)可能是位置：body标记上的static。位置相对将不起作用！
我的wordpress主题已覆盖默认的正文显示，并且使我困惑了很长时间。
我知道一个旧线程，但是如果您正在寻找响应式解决方案，那么此jQuery附加功能将有所帮助：
1
2
3
4
5
6
7
8
9
10
| $(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
} |
完整指南可以在这里找到：https://pixeldesigns.co.uk/blog/response-jquery-sticky-footer/
我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS
使用非常简单。包含库后，只需调用此行代码。
1
| footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER")); |
通过调用具有不同参数/ id的上述功能可以动态更改页脚。
1
| footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER")); |
注意：-您无需更改或添加任何CSS。库是动态的，这意味着即使在加载页面后调整屏幕大小，它也会重置页脚的位置。我创建了这个库，是因为CSS暂时解决了这个问题，但是当显示大小发生显着变化时(从台式机到平板电脑，反之亦然)，它们要么重叠内容，要么不再保持粘性。
另一个解决方案是CSS Media Queries，但是您必须为不同尺寸的屏幕手动编写不同的CSS样式，而该库会自动运行并受所有支持JavaScript的基本浏览器支持。
编辑
CSS解决方案：
1
2
3
4
5
6
7
8
| @media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
} |
现在，如果显示的高度大于您的内容长度，我们将使页脚固定在底部，否则，它将自动出现在显示的最后，因为您需要滚动查看它。
而且，它似乎比JavaScript /库更好的解决方案。
以前，我对本页上建议的解决方案没有任何运气，但最终，这个小技巧成功了。我将其作为另一个可能的解决方案。
1
2
3
4
5
6
7
8
9
| footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
} |
Flexbox解决方案
对于自然的页眉和页脚高度，首选Flex布局。此flex解决方案已在现代浏览器中经过测试，并且实际上在IE11中可以正常运行:)。
参见JS Fiddle。
的HTML
1
2
3
4
5
6
7
8
9
10
11
| <body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body> |
的CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
} |
对我来说，最好的显示方式(页脚)始终停留在底部，但始终没有覆盖内容：
1
2
3
4
| #my_footer {
position: static
fixed; bottom: 0
} |
flex解决方案对我来说使脚注保持粘性很有效，但是不幸的是，更改正文以使用flex布局使我们的某些页面布局发生了变化，而且效果不佳。最终对我有用的是：
1
2
3
4
5
6
| jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height',"calc(92vh -" + fht +"px)");
}); |
我是从ctf0的响应获得的，网址为https://css-tricks.com/couple-takes-sticky-footer/
1
2
3
4
5
6
7
| div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body style ="height:1500px">
position: fixed;
<p >
An element with position: fixed; is positioned relative to the viewport , which means it always stays in the same place even if the page is scrolled :
</p >
This div element has position: fixed;
</body > |
jQuery跨浏览器自定义插件-$ .footerBottom()
或者像我一样使用jQuery，并将页脚高度设置为auto或fix，无论您喜欢什么，它都可以正常工作。此插件使用jQuery选择器，因此要使其正常工作，您将必须在文件中包含jQuery库。
这是您运行插件的方式。导入jQuery，复制此自定义jQuery插件的代码，并在导入jQuery后将其导入！它非常简单和基本，但是很重要。
当您执行此操作时，只需执行以下代码：
1
2
3
| $.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred"div" with for example class"footer"
// by setting target to {target:"div.footer"} |
无需将其放置在文档准备事件中。它会很好地运行。加载页面和调整窗口大小时，它将重新计算页脚的位置。
这是您无需了解的插件代码。只知道如何实现它。它为您完成工作。但是，如果您想知道它是如何工作的，只需浏览一下代码即可。我给你留下了评论。
1
| //import jQuery library before this script |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| // Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use"$.fn.footerBottom" or"$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target:"footer",
container:"html",
innercontainer:"body",
css: {
footer: {
position:"absolute",
left: 0,
bottom: 0,
},
html: {
position:"relative",
minHeight:"100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight +"px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight +"!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5 |
1
2
3
4
5
6
7
8
9
| /* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<header>
<nav>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</nav>
</header>
<section>
<p>
</p>
<p>
Lorem ipsum...
</p>
</section>
<footer>
<p>
Copyright 2009 Your name
</p>
<p>
Copyright 2009 Your name
</p>
<p>
Copyright 2009 Your name
</p>
</footer> |
