Question

我正在创建一个div作为页脚：

<div class="content">blah blah blah</div>
<div class="content">more content</div>
<div class="content">even more content</div>
<div id="footer">blah blah blah</div>

页脚的CSS如下：

#footer{
    height: 50px;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}

那么如何在50px和content之间留出footer空格？我试过在两者之间增加一个间隔div，但没有成功。 spacer div需要大于content的高度才能产生任何效果。我已尝试margin-top到#footer，但这不起作用，但我不希望margin-bottom用于content，因为内容容器是多个。设置content的下限可能会破坏它们的呈现方式。谢谢你的帮助。

P.S。这与Set position absolute and margin不重复。

Answer 1

好的，让我们旋转一下。

也许这会对你有所帮助：

http://codepen.io/bbredewold/pen/avgZmj

如果您描述要实现的行为，包括页面应如何响应不同大小，这将有所帮助。也许你可以分叉（复制）笔，并做一些补充，以帮助我们理解你的问题。

祝你好运！

＆＃13;

.outside {
  position: absolute;
  overflow: scroll;
  background: #ccc;
  bottom: 100px;
  left: 0;
  right: 0;
  top: 0;
}
.content {
  outline: 1px solid blue;
}
#footer {
  outline: 1px solid red;
  background: #ccc;
  height: 50px;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

＆＃13;

<div class="outside">
  <div class="content">blah blah blah</div>
  <div class="content">more content</div>
  <div class="content">even more content</div>
</div>

<div id="footer">blah blah blah</div>

＆＃13;

Answer 2

编辑：根据您的评论，您正在寻找的是一个静态页脚

#footer{
    height: 50px;
    display: block;
    margin-top: 50px;
}

我是这样一个SO noob我无法评论更多信息：| 。我假设您可能尝试实现页脚底部始终显示页脚的fixed / sticky footer？如果你能提供一个你想要达到的效果的例子，我很乐意用更具体的信息来编辑我的答案。

无论如何，因为您使用绝对定位，元素将从文档流中取出，并且不会影响页面上的任何其他元素。这意味着利润无效。对于固定定位也是如此，如果您正在制作basic sticky footer，那么这就是您真正想要的。

如果希望margin对元素有任何影响，则需要将元素display属性设置为块级元素（块，表，内联块等），并将其定位为静态（默认）或相对

坚固的粘性页脚最干净的方法是使用弹性盒。请注意使用语义html标记和类而不是id

。

<style>
     /**
     * 1. Avoid the IE 10-11 `min-height` bug.
     * 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
     *    letting these items shrink to smaller than their content's default
     *    minimum size.
     */
    .site {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 1 */
    }
    .header,
    .footer {
        margin-top: 50px;
        flex-shrink: 0; /* 2 */
    }
    .content {
        flex: 1 0 auto; /* 2 */
    }
</style>

<body class="site">
    <header class="header">…</header>
    <main class="content">…</main>
    <footer class="footer">…</footer>
</body>

由Phillip Walton提供http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

请注意，这仅适用于较新的浏览器，因此如果您支持旧版本的IE，则需要使用基于固定定位的粘性页脚，或者忘记粘性页脚。

Answer 3

雅，它不会那样工作。因为你给#footer一个绝对位置，它的位置与文档中其他元素的位置无关。

两件事之间不会显示任何余量或填充量。

具有底部属性的绝对定位div的保证金顶部

3 个答案: