页脚问题

Question

我有一个页面，我想用以下内容自动居中：

position: absolute 
left: 50%
margin-left: -1/2 of width.

这有效，但是当我使用position: absolute时，就像我的页脚突然看不到内容并浮动一样。我尝试使用这个sticky footer， 但它对我不起作用。以下是未删除粘性页脚和自动中心的页面链接：http://cashforcarsanywhere.com/how-it-works/

任何帮助都将不胜感激。

我没有使用JavaScript或jQuery的经验，所以请尝试限制CSS，HTML的答案。

Answer 1

的 #footer on page bottom

<强> Essencials：

<div id="footer">
   <p>This is some #footer content</p>
</div>

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  padding: 20px 15px;
  background:#bada55;
}

---

的 #footer on page bottom with Centered Content

<强> Essencials：

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  width: 600px;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  background:#cf5;
}

---

的 Example with page content

<强> Essencials：

<div id="page">
  <p>This is some Centered #page content my 100px padding bottom will prevent the content to end up behing the #footer applying properly the vertical window scrollbars once I touch the very page bottom.</p>
</div>  

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>

#page{
  margin: 0 auto;
  width:600px;
  padding:20px 15px 100px;
  background:#eee; /* BG is just for example, avoid BG on this element, rather create an inner one*/
}

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  width: 600px;
  background:#cf5;
}

Answer 2

设置position:absolute将从文档流中删除该元素。因此，它将不再推动你的页脚。

我在下面的CSS中取得了成功。

请注意，div.span8有几个级联定义。请务必删除所有浮动和宽度设置。实际上，我刚从span8删除了整个div类。

div.span8 {
  // remove all float and width settings.
  // (I just removed the entire class "span8" from this `div`.)
}


#howitworkscontent {
  position: relative;
  width: 800px;
  padding: 15px auto;
  margin: 0px auto;
  /*float: left;*/
}

示例：http://jsfiddle.net/5WFNW/

修改

正如hustlerinc所提到的那样，由于OP试图使用bootstrap响应，因此使用bootstrap类而不是width:800px可能会更好。但是，由于bootstrap的.span类包含float:left，您还需要设置float:none。

Answer 3

使用bootstrap的原因是你不需要所有那些凌乱的CSS，使用它对你有利。

修改：我仔细研究了您的代码，这是您的解决方案。 将<div class="span8">更改为<div class="span8 offset2">，它将完全居中。

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem