没有 Content Div 的 WordPress 页面上的 CSS 粘性页脚

发布于 2025-01-02 19:06:56 字数 834 浏览 1 评论 0原文

我试图让我的页脚下降到页面的末尾，以便它粘在底部。

我尝试使用一个教程，其中使用 css 样式使页脚粘在底部：

    * { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 175px; }  /* must be same height as the footer */

#footer {
        position: relative;
    margin-top: -175px; /* negative value of footer height */
    height: 175px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

我正在尝试使其工作几个小时，有人可以检查我的问题吗？

我正在从事的项目

提前致谢

原文

I'm trying to make my footer going down to the end of the page so that it sticks to the bottom.

I tried using a tutorial where I used that css styles to make the footer sticky to the bottom:

    * { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 175px; }  /* must be same height as the footer */

#footer {
        position: relative;
    margin-top: -175px; /* negative value of footer height */
    height: 175px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

I'm trying to make that work now for hours, could someone please check on my problem ?

My project I'm working on

Thanks in advance

分享到QQ

分享到微博

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

发布评论

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

二手情话 2025-01-09 19:06:56

为了实现粘性页脚效果，您必须对 HTML 和 CSS 进行一些修改，请尝试以下操作：

CSS

html, body {
    height: 100%;
}

#colophon:before, #colophon:after {
    content: "";
    display: table;
    zoom:1; /*ie fix*/
}
#colophon:after {
    clear: both;
}
footer {
    display: block;
}

#page {
    height: auto !important;
    margin: 2em auto -175px;
    max-width: 1000px;
    min-height: 100%;
}

HTML

为了使页脚粘在底部你必须将它与你的 #page 容器分开，如下所示：

<div id="page" class="hfeed">..</div>
<footer id="colophon" role="contentinfo">...</footer>

这应该可以解决问题！

In order to achieve the sticky footer effect you have to make some modifications to your HTML and CSS, try the following:

CSS

html, body {
    height: 100%;
}

#colophon:before, #colophon:after {
    content: "";
    display: table;
    zoom:1; /*ie fix*/
}
#colophon:after {
    clear: both;
}
footer {
    display: block;
}

#page {
    height: auto !important;
    margin: 2em auto -175px;
    max-width: 1000px;
    min-height: 100%;
}

HTML

In order for your footer to stick to the bottom you have to separate it from your #page container, like so:

<div id="page" class="hfeed">..</div>
<footer id="colophon" role="contentinfo">...</footer>

And that should do the trick!

回复收藏 0 原文

辞别 2025-01-09 19:06:56

它比你正在做的更简单。尝试这种结构

<html>
<body>
<div id="centering-div">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>
</body>
</html>

，这样页脚内容将始终位于底部。您可以将 css 样式添加到 centering-div id 以指定站点宽度和居中 css。您不需要指定跨越整个宽度的页面部分的定位。内容 div 中是您应该放置所有内容的位置。

its more simple than what you are doing. try this structure

<html>
<body>
<div id="centering-div">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>
</body>
</html>

That way the footer content will always be on the bottom. you can add css styles to the centering-div id to give site width and centering css. You shouldn't need to specify positioning on the sections of a page that span the entire width. within the content div is where you should put all your content.

回复收藏 0 原文

~没有更多了~