html - 粘性页脚边距问题

Question

我正在玩CSS Sticky Footer ，但我遇到了一个问题......

* { margin: 0; }

虽然它旨在重置所有 DIV 边距，但这不是我想要做的。每页上的文字都被压扁了，现在没有边距了。

我已经尝试在我想要的每个元素上定义它，但没有成功，即..

div.wrapper, div.push, div.footer { margin: 0; }

我怎样才能绕过它，所以只有粘性页脚的必要元素的边距为 0，其余的保持不变？

Answer 1

删除 * CSS 并将 HTML 更改为：

html, body {
    height: 100%;
    margin: 0;
}

.footer * {
    margin: 0;
}

Answer 2

我不明白.. 为什么要使用粘性页脚。尝试创建一个像这样的 css 表结构。人们低估了 CSS 表格！他们在创造流体设计方面可能很棒..

#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; } 

<div id="wrapper">
  <header>
    <h1>I'm a header!</h1>
  </header>
  <div id="main">

  </div>
  <footer>
    <p>I'm a footer!</p>
  </footer>
</div>

在这个 CSS 示例中，其他元素都不会受到影响，页脚和页眉都保持它们的高度，而中间部分是流体填充剩余空间。

还可以看看 table-cell .. 它允许水平结构，例如带有流体主要部分的实心左侧。

Answer 3

此外，要更正字体中的文本，您可以编辑此 CSS：

font: 0.8em helvetica,arial,sans-serif;

style.css 的第 50 行

.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}

Answer 4

如果它很容易创建，为什么要使用预制的粘性页脚？尝试：

<footer><span>Footer Content</span></footer>

使用以下 CSS：

footer{    
    position:fixed;
    bottom:0px;
    height:30px;
    width: 100%;
    z-index: 9999;
    color: #595959;
    font-size: 9pt;
    text-align: center;
}