在我的wordpress中将页脚强制到页面底部以获取短页答案

【问题标题】：force footer to bottom of page for short pages in my wordpress在我的wordpress中将页脚强制到页面底部以获取短页
【发布时间】：2014-12-05 02:17:12
【问题描述】：

我有一个网站，我仍在玩和编辑，但是我试图让页脚粘在屏幕底部有点迷失。

我尝试了 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 的情况下让它工作吗？

【问题讨论】：

标签： html css wordpress

【解决方案1】：

来吧，伙计，你是如此接近！

确保遵循相同的结构：

<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%;
}

示例： http://codepen.io/EightArmsHQ/pen/YPymWV

我真的建议在 Codepen 中对我的代码进行一些处理，以便掌握它。我制作的每个页脚都添加了页脚，而且它仍然有时会比我更好，所以请坚持下去。也总会有上述方法完全不起作用的情况......

【讨论】：

我刚刚注意到我的页脚不应该被包裹起来！！呃，菜鸟的错误，哈哈……我已经看了一段时间了，代码是一场噩梦。