边距绝对定位的div与底部财产

我创建一个div作为页脚这样：边距绝对定位的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，但没有成功。 spacer div需要高于content的高度才能产生任何效果。我试过margin-top到#footer，但是没有工作，但我不想为content，因为内容容器是多个。设置content的底部边距会毁掉它们的渲染方式。谢谢你的帮助。

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

来源

2015-11-25 Trouble Zero

绝对定位时，这并不理想......你想实现什么？ – Milkmannetje

好吧，'bottom'只有在'position：absolute'时才会起作用。另外，我希望将'＃页脚'保留在页面的底部。 –

你能提供一个你正在尝试的小图吗？我们无法从您提供的代码中猜出您想要的结果。 – Milkmannetje

好吧，让这个旋转。

也许这可以帮助你有点用自己的方式：

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>

来源

2015-11-25 22:52:40 Milkmannetje

谢谢！这工作！ –

@TroubleZero如果您对此感到满意并且能够工作，您能否接受此答案？ –

刚刚做到了。谢谢。 –

编辑：从下面你的意见，你正在寻找的是一个静态的页脚

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

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

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

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

强大的粘脚的最干净的方法是使用弹性盒。使用注意事项，而不是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/

注意的语义化的HTML标签和类的，这仅适用于新的浏览器上运行，所以如果你是支持IE浏览器的老版本中，你需要使用基于固定位置的粘性页脚，或忘记粘性页脚。

来源

2015-11-25 22:52:31

谢谢西蒙。但我不希望脚注粘在底部。我希望它可以随内容一起滚动，并作为页面上的最后一件事物，但它与最后一个内容之间有一定的空间。 –

我只是想明白你正在寻找什么行为。页脚不是粘或不粘。如果你想要一个粘性页脚 - 使用上面提供的任何代码示例，如果没有，那么你可以删除'position：absolute;'并添加'margin-top：50px;'。这真的归结为当页面上的内容很少或页面上的内容很多时，页脚的行为方式。你希望你的用户在页面超长的时候必须滚动页面才能看到页脚？当内容很少时，你是否希望页脚留在底部 –

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

在两个彼此没有关系的事情之间不会显示任何数量的保证金或填充。

来源

2015-11-25 22:59:58

边距绝对定位的div与底部财产

回答

相关问题