为我的网站制作页脚的代码

本文介绍了为我的网站制作页脚的代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好

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?

推荐答案

* {
    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

这篇关于为我的网站制作页脚的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！