具有底部属性的绝对定位 div 的上边距答案

【问题标题】：Margin-top for absolute positioned div with bottom property具有底部属性的绝对定位 div 的上边距
【发布时间】：2016-02-28 20:26:30
【问题描述】：

我正在创建一个 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;
}

那么我如何在content 和footer 之间留一个50px 空格？我尝试在两者之间添加一个间隔 div 但没有成功。间隔 div 需要超过 content 的高度才能产生效果。我试过margin-top 到#footer，但没有用，但我不希望margin-bottom 用于content，因为内容容器是多个。为content 设置下边距会破坏它们的渲染方式。感谢您的帮助。

附：这不是 Set position absolute and margin 的重复。

【问题讨论】：

当绝对定位时这并不理想......你想达到什么目标？
好吧，bottom 仅在 position: absolute 时有效。另外，我想将#footer 保留在页面底部。
你能提供一个你正在尝试的小草图吗？我们无法仅从您提供的代码中猜出您想要什么......
感谢 j08691。我已经纠正了错字。
@Milkmannetje 我已经添加了草图。

标签： html css position

【解决方案1】：

好的，试一试。

也许这对您有所帮助：

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

如果您描述您想要实现的行为，包括页面在不同尺寸下应如何响应，将会有所帮助。也许您可以分叉（复制）笔，并添加一些内容以帮助我们了解您的问题。

祝你好运！

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

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

【讨论】：

@TroubleZero 如果您对此答案感到满意并且有效，请您接受。

【解决方案2】：

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

不会在两个不相关的事物之间显示任何边距或内边距。

【讨论】：

【解决方案3】：

编辑：从下面的 cmets 中，您正在寻找的是静态页脚

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

我是如此的菜鸟，我无法评论更多信息：| .我假设您可能正在尝试实现一个fixed / sticky footer，其中页脚始终出现在页面底部？如果您能提供一个您想要达到的效果的示例，我很乐意用更具体的信息编辑我的答案。

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

如果您希望边距对元素产生任何影响，您需要将元素显示属性设置为块级元素（块、表格、行内块等），并将其定位为静态（默认）或相对.

稳健的粘性页脚最简洁的方法是使用弹性框。注意使用语义 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>

感谢菲利普·沃尔顿http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

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

【讨论】：

谢谢西蒙。但我不希望页脚粘在底部。我希望它可以随着内容滚动，并且作为页面上的最后一件事，但它和最后一个内容之间有一些空间。
我只是想准确了解您正在寻找的行为。页脚要么是粘性的，要么不是。如果你想要一个粘性页脚 - 使用上面提供的任何代码示例，如果没有，那么你可以删除 position: absolute; 并添加 margin-top: 50px;。当页面上的内容很少或页面上的内容很多时，这实际上归结为您希望页脚的行为方式。当页面超长时，您是否希望您的用户必须滚动很久才能到达页脚？内容少的时候要不要让页脚留在底部