Question

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

我尝试了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 */
}

你是否有任何想法如何在没有职位的情况下让它工作：绝对？

Answer 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中使用我的代码，只是为了掌握它。每一个我曾经制作过的页脚都会粘贴页脚，并且仍然会让我好一些，所以请坚持下去。也总会出现以上情况，完全工作......

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

1 个答案: