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

另外，要更正fotter中的文本，您可以编辑此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;
}

粘性页脚边距问题

4 个答案: