Question

我正在尝试使用http://ryanfait.com/sticky-footer/

中的以下粘性页脚解决方案

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
h1 {
    margin-top:1em;  
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <h1>This header screws with sticky footer</h1>
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

然而，正如上面的代码片段所示，为＆lt; h1＆gt;添加了一个边距。标记会导致不受欢迎的滚动条。

根据我的基本理解，保证金应仅影响＆lt; h1＆gt;的大小。标签，不应该影响包装的大小/位置（除非没有空间 - 但显然有足够的空间）。

编辑：我不想找到解决方案，我想了解会发生什么。似乎边距不会推动＆lt; h1＆gt;。相对于父容器向下标记，而是将其与＆lt; h1＆gt;一起向下推送父容器标签。这是正确的，如果是的话，为什么？这似乎是违反直觉的。

Answer 1

如果你想操纵边距/填充属性，它总是保存添加display:inline-block属性而不是使用内联元素。将其添加到您的h1代码中，您的问题就会得到解决。

这是一篇文章，其中包含有关此问题的一些解释 Inline elements and padding

修改：我有解释。

在CSS中，我们有类似“折叠边距”的内容。这就是W3C定义它的方式：

在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）相邻的边距（没有非空内容，填充或边框区域或间隙将它们分开）形成一个保证金。

边距仅在以下情况下相邻：

都属于参与相同块格式化上下文的流内块级框

没有行框，没有间隙，没有填充，没有边框将它们分开（请注意，为此目的，忽略某些零高度的行框。）

都属于垂直相邻的盒子边缘，即形成以下对中的一个：

一个盒子的上边缘和第一个流入的孩子的上边缘   箱子的下边距和下一个流入的兄弟姐妹的上边缘

最后一个流入子项的下边距和父项的下边距（如果父项具有'自动'计算高度

一个框的顶部和底部边距，它没有建立新的块格式化上下文，并且没有计算出'min-height'，零或'自动'计算'高度'，没有流入的子项

如果您想了解更多信息，可以在这里找到一些有用的链接：

W3C.org
Understand CSS Margins Collapsing（明确解释+示例）

总而言之，有许多不同的方法可以解决这个问题。例如，向您的包装元素或display:inline-block标记添加float:left，border:1px black甚至h1属性将解决“问题”。当然，这不是一个真正的问题，在某些情况下，折叠利润非常有用。

Answer 2

您可以将overflow:auto;或overflow:hidden;添加到包装器div中。如果您希望将h1保留为块元素，这可能是更好的解决方案。

Answer 3

似乎我的问题是由collapsed margins引起的，已经引入了规则以在所有具有边距的元素之间产生一致的间距。如果没有折叠边距规则，边距在某些情况下会应用两次。

在another stackoverflow question中更全面地解释了这一点。

箱型号 - 为什么带有粘性页脚的割台螺丝的余量

3 个答案: