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

时间：2009-12-17 23:37:48

标签： css xhtml footer sticky

好吧，我的问题是粘性页脚代码工作，我已经测试过了：

没有图片只需复制并粘贴它就可以了：

<!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>

我在这里很诚恳，如果我知道能够解决这个问题，我并不完全明白“粘性页脚”是如何工作的。

“粘性页脚”贴在模板的末端！我可以使用绝对位置让它工作，IE7讨厌那个......

这个模板不适用于IE6，所以甚至不用担心垃圾......

1 个答案:

答案 0 :(得分：1)

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

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

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

相关问题
最新问题