html - 页脚问题

Question

我有一个页面，我想将其内容自动居中:

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

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

如有任何帮助，我们将不胜感激。

我没有使用 JavaScript 或 jQuery 的经验，所以请尽量限制对 CSS、HTML 的回答。

Answer 1

#footer on page bottom

要点:

<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

要点:

<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

要点:

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