当前位置： 文江博客话题详情

粘性页脚有效，但不适用于我的模板？

发布于 2024-08-15 11:01:43 字数 8280 浏览 2 评论 0原文

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

没有图像，只需复制并粘贴即可工作：

<!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 上工作，所以不用担心那些垃圾...

原文

ok, my problem is Sticky footer code work, I've tested it:

No image just copy and paste it will work:

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

so here it is on my template (looks weird without the images):
PS: there is no image but the template ends like 30px after the text:

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

I'm being sincere here, I don't fully understand how the "sticky footer" works maybe if I knew I would be able to solve this.

The "sticky footer" is sticking to end of the template! I could use absolute postion to make it work bu IE7 hates that...

This template is not supposed to work on IE6, so don't even worry about that garbage...

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

寄意 2024-08-22 11:01:43

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

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

导致页面底部出现较大空间。这就是您所看到的导致它对您不起作用的原因吗？如果您使用的是 Firefox，您可以获得 Firebug 插件 ( http://getfirebug.com/ )，它允许您实时查看和更改元素的 CSS。非常有用的调试工具。

In the second example, your CSS entry of:

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

Is causing your large space at the bottom of the page. Is that what you are seeing that is causing it not to work for you? If you are using Firefox you can get the Firebug plugin ( http://getfirebug.com/ ) which allows you to view and alter the CSS of elements in realtime. Very helpful debugging tool.

回复 原文
~没有更多了~

关于作者

も星光

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文