html - 在我的 wordpress 中强制页脚到页面底部以获取短页面-6ren

html - 在我的 wordpress 中强制页脚到页面底部以获取短页面

转载作者：行者123 更新时间：2023-11-28 12:37:20

我有一个网站，我仍在使用和编辑它，但是我对尝试将页脚贴在屏幕底部有点迷茫。

我尝试了 ryanfait 选项 ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ )，但我看不出如何让它与我当前的主题一起工作。

然后我尝试了一种使用绝对位置等的不同方法，但它把页脚放在我的长页面的页面中间，太明显了，无法工作。

我当前的站点是:http://goo.gl/PO3OYo您可以在首页上看到我所说的页脚不正确的意思...

我的网站 html 基本上是这样的:

<body>
  <div id="wrap">
    <div id="header"></div
    <div id="nav"></div>
    <div id="inner"></div>
    <div id="footer" class="footer"></div>
 </div>

CSS 是

* { 
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    height:100%;
}

body {
    background: #000000 url(images/bg.jpg) top center no-repeat;
    color: #444444;
    font-size: 12px;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
    margin: 0 auto 0;
    padding: 0;
    line-height: 21px;
    height:100%;
}

#wrap {
    height:auto !important;
    margin:0 auto;
    min-height:100%;
    padding:0;
    position: relative; */ I tried this but it breaks long pages */
}

#inner {
    background: #FFF;
    width: 900px;
    margin: 0 auto 0;
    padding: 30px;
    overflow: hidden;
}

#footer {
    background: #161616;
    color: #666666;
    margin: 0 auto 0;
    padding: 20px, 0, 0, 0;
    clear: both; 
    overflow: hidden;
    border-top: 1px solid #222222;
    height: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    position: absolute; */ I tried this but it breaks long pages */
}

你有什么想法我可以在没有 position: absolute 的情况下让它工作吗？

最佳答案

伙计，你离得太近了!

确保您遵循相同的结构:

<body>
    <div id="wrap">
      <div id="header">fdsf</div>
        <div id="nav">ffd</div>
        <div id="inner">
          content here...
        </div>
        <div class="push"></div>            
    </div>
    <div id="footer" class="footer">footer</div>
</body>

然后来自 ryan fait 的

#wrap {
min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  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 */
}

#footer {
  background: #161616;
  color: #666666;
  margin: 0 auto 0;
  padding: 20px, 0, 0, 0;
  clear: both; 
  overflow: hidden;
  border-top: 1px solid #222222;
  width: 100%;
}