为我的网站制作页脚的代码 [英] code to make the footer for my website
本文介绍了为我的网站制作页脚的代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好
i希望将图像作为我的网站的页眉和页脚。对于标题我使用以下代码
hello
i want to make an image as the header as well as footer of my website.For header i used the following code
body
{
background-image:url(footer.png);
background-repeat:no-repeat;
background-size:contain;
}
此外，我希望相同的图像能够贴在浏览器底部，覆盖浏览器长度。如何实现这一目标？
Also I want the same image to stick to bottom of browser covering browser length.How can i achieve this?
推荐答案
http://techtalk.virendrachandak.com/sticky-header-and-footer-using- css / [ ^ ]
http://www.cssplay.co.uk/layouts/basics2.html [ ^ ]
这并不复杂，但也不是那么简单。
第一个解决方案：
请参阅： Ryan Fait's - 一个可以正常使用的CSS Sticky Footer [ ^ ]
来自网站：
It's not complicated, but it's also not that simple.
First solution:
See: Ryan Fait's - A CSS Sticky Footer that just works[^]
From the site:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
------------------------------------------------ -------------------
第二个选项（Steve Hatcher的Sticky Footer Solution）
-------------------------------------------------------------------
Second option (Sticky Footer Solution by Steve Hatcher)
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
干杯，
Edo
Cheers,
Edo
访问这里....
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ [ ^ ]
visit Here....
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/[^]
这篇关于为我的网站制作页脚的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
