粘性页脚工作但不在我的模板上？

好吧，我的问题是粘页脚代码的工作，我已经测试过它：粘性页脚工作但不在我的模板上？

无图像复制并粘贴它会工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sticky Footer</title> 
<style type="text/css"> 

* {margin:0 auto; 
padding:0px;} 

html, body {height: 100%;} 

.wrapper {min-height: 100%; 
height: auto; 
height: 100%; 
margin: 0 auto -250px;} 

.footer, .push {height: 250px;} 

.footer {background:#CCC; 
width:100%;} 

.conver {width:960px; 
height:200px;} 

.extra1 {float:left; 
width:320px; 
height:170px; 
background:#0F0} 

.extra2 {float:left; 
width:320px; 
height:170px; 
background:#00F} 

.extra3 {float:right; 
width:320px; 
height:170px; 
background:#F00} 

.clear {clear:both;} 

.footer_note p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
color:#000; 
text-align:right; 
padding-top:20px;} 

</style> 
</head> 
<body> 

<div class="wrapper"><!-- Wrapper goes around all the content --> 
<p>Your website content here.</p><!-- All your content goes here --> 
<div class="push"></div><!-- Push the footer to the bottom --> 
</div><!-- Wrapper ends here --> 

<div class="footer"><!-- Wrap the footer --> 

    <div class="conver"><!-- Contain footer elements --> 
    <div class="extra1"></div> 
    <div class="extra2"></div> 
    <div class="extra3"></div> 
    <div class="clear"></div> 
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div> 
    </div><!-- conver Ends here --> 


</div><!-- Footer ends here --> 

</body> 
</html>

所以这里是我的模板（看起来怪怪无图像）： PS：没有图像，但之后的文字模板结束像30PX：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<!--[if IE 6]> 
    <meta http-equiv="refresh" content="0; url=http://www.google.com.br"> 
<![endif]--> 
<style type="text/css"> 
/* General */ 
* {margin:0px auto; 
padding:0px;} 

p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
letter-spacing:1px; 
line-height:18px; 
text-align:left; 
color:#000;} 

.breadcrumbs_here {width:940px;} 

/* background */ 
html {background:#039 url(../images/bg_repeat_x.png) repeat-x; 
height:100%;} 

body {background:url(../images/Glare_01.jpg) no-repeat top center; 
height:100%;} 

html > body {min-height:100%; 
height:auto;} 
/* background ends here */ 

/* header */ 
a#header {background:url(../images/header-trans.png) no-repeat; 
display:block; 
height:130px; 
width:630px; 
text-indent:-9999px; 
margin-right:500px;} 
/* header ends here */ 

/* sheet starts here */ 
.sheet {position:relative; 
width:1000px; 
top:10px;} 

.top_sheet {width:1000px; 
height:20px;} 

.tl {float:left; 
background:url(../images/sheet_top_left-trans.png) no-repeat; 
height:20px; 
width:20px;} 

.tm {float:left; 
background:url(../images/sheet_top-trans.png) repeat-x; 
height:20px; 
width:960px;} 

.tr {float:right; 
background:url(../images/sheet_top_right-trans.png) no-repeat; 
height:20px; 
width:20px;} 

.middle {position:relative; 
background: url(../images/sheet_middle.png) repeat-y; 
width:1000px;} 

bottom_sheet {width:1000px; 
height:30px;} 

.bl {float:left; 
background:url(../images/sheet_bottom_left-trans.png) no-repeat; 
width:20px; 
height:30px;} 

.bm {float:left; 
background:url(../images/sheet_bottom-trans.png) repeat-x; 
width:960px; 
height:30px;} 

.br {float:right; 
background:url(../images/sheet_bottom_right-trans.png) no-repeat; 
width:20px; 
height:30px;} 
/* sheets end here */ 

/* Top menu and search */ 
.top_menu {position:relative; 
width:960px; 
height:51px;} 

.top_menu_inside {float:left; 
width:720px; 
height:51px; 
background:url(../images/menu_bg.png) repeat-x;} 

.search_background {float:right; 
width:240px; 
height:51px; 
background:url(../images/search_bg.png) repeat-x;} 
/* Top menu and search ends here*/ 

/* highlights */ 
.highlights {position:relative; 
width:960px; 
height:150px; 
background:url(../images/highlight_bg-trans.png) repeat-x;} 

.hl1{float:left; 
height:150px; 
width:320px;} 

.hl2{float:left; 
height:150px; 
width:320px;} 

.hl3{float:right; 
height:150px; 
width:320px;} 
/* highlights ends here */ 

/* content */ 
.content {position:relative; 
width:1000px; 
background:url(../images/content_middle.png) repeat-y;} 

.content_wrapper {position:relative; 
width:960px;} 

.left {float:left; 
height:100%; 
width:25%} 

.left p {padding-left:10px;} 

.right {float:right; 
height:100%; 
width:75%} 

.right p {padding-left:10px; 
padding-right:10px;} 

.clear {clear:both; 
clear:both; 
height:0; 
font-size: 1px; 
line-height: 0px;} 
/* content ends here */ 

/* footer */ 

.wrapper {min-height: 100%; 
height: auto; 
height: 100%; 
margin: 0 auto -250px;} 

.footer, .push {height: 250px;} 

.footer {background:#CCC; 
width:100%;} 

.conver {width:960px; 
height:200px;} 

.extra1 {float:left; 
width:320px; 
height:170px; 
background:#0F0} 

.extra2 {float:left; 
width:320px; 
height:170px; 
background:#00F} 

.extra3 {float:right; 
width:320px; 
height:170px; 
background:#F00} 

.clear {clear:both;} 

.footer_note p {font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
color:#000; 
text-align:right; 
padding-top:20px;} 

</style> 

</head> 
<body> 

<a id="header" href="http://www.google.com.br" title="google" target="_self">google</a> 
<div class="wrapper"><!-- Wrapper goes around all the content --> 
<div class="sheet"> 

    <div class="top_sheet"> 
    <div class="tl"></div> 
    <div class="tm"></div> 
    <div class="tr"></div> 
    </div> 

    <div class="middle"> 

     <div class="top_menu"> 
      <div class="top_menu_inside"></div> 
      <div class="search_background"></div> 
      <div class="clear"></div> 
     </div> 

       <div class="highlights"> 
       <div class="hl1"></div> 
       <div class="hl2"></div> 
       <div class="hl3"></div> 
       <div class="clear"></div> 
       </div><!-- highlights ends here --> 

     <div class="content"> 

     <div class="breadcrumbs_here"></div> 
      <div class="content_wrapper"> 
      <div class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ligula, faucibus ut aliquam ut</p></div> 
      <div class="right"></div> 

      <div class="clear"></div><!-- keeps the floats in one piece --> 

     </div><!-- content wrapper ends here --> 

     </div><!-- content ends here --> 

    </div><!-- middle ends here --> 

    <div class="bottom_sheet"> 
    <div class="bl"></div> 
    <div class="bm"></div> 
    <div class="br"></div> 
    <div class="clear"></div> 
    </div> 

</div><!-- End of the sheet class --> 

<div class="push"></div><!-- Push the footer to the bottom --> 

</div><!-- Wrapper ends here --> 

<div class="footer"><!-- Wrap the footer --> 

    <div class="conver"><!-- Contain footer elements --> 
    <div class="extra1"></div> 
    <div class="extra2"></div> 
    <div class="extra3"></div> 
    <div class="clear"></div> 
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div> 
    </div><!-- conver Ends here --> 


</div><!-- Footer ends here --> 
</body> 
</html>

我是真诚的在这里，我不完全理解的“粘页脚”是如何工作的，如果可能我知道我可以解决这个问题。

“粘脚”粘在模板的末尾！我可以用绝对现在的位置，使其工作BU IE7讨厌你......

这个模板是不应该的IE6工作，所以甚至不担心垃圾......

来源

2009-12-17 Evilalan

在第二个例子，您的CSS条目为：

* {margin:0px auto; 
padding:0px;}

导致您的页面底部有大的空间。那是你所看到的那使它不适合你吗？如果您使用的是Firefox，您可以获得Firebug插件（http://getfirebug.com/），该插件允许您实时查看和更改元素的CSS。非常有用的调试工具。

来源

2009-12-18 15:33:52

粘性页脚工作但不在我的模板上？

回答

相关问题