如何使 div 固定并有边距？答案

【问题标题】：How to make div fixed and with margin?如何使 div 固定并有边距？
【发布时间】：2013-05-21 17:27:09
【问题描述】：

我想为我的网站制作页脚，并且我希望它被修复（总是在底部）。它工作正常，看起来不错，但是当内容已满时，它没有显示我给它的 margin-top。请帮忙，我需要一种方法来提供固定的 div - margin-top ... 谢谢。

代码：

<div style="width: 100%; height: 100px; margin-bottom: 50px; background: red;">

</div>
<div style="width: 100%; text-align: center;">
    Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />Example of full div<br />
</div>
<div style="width: 100%; height: 50px; margin-top: 50px; background: blue; position: fixed; bottom: 0;">

</div>

【问题讨论】：

顺便说一句，内联 css 通常不是最好的主意，随着时间的推移很难维护。

标签： html css margin fixed

【解决方案1】：

您应该查看粘性页脚，这将解决它。是的，你应该真正将你的html与你的css分开，如果它是一个页脚，你应该使用页脚标记。 http://ryanfait.com/sticky-footer/

【讨论】：

【解决方案2】：

jsBin Demo

使用z-index 将另一个固定高度的 div 放在蓝色的正下方。这将导致在蓝色上方显示白色“边距”。页边距不影响页面的原因是位置：固定元素不影响页面流。

<div style="width: 100%; height: 100px; background: white; position: fixed; bottom: 0;z-index:1"></div>
<div style="width: 100%; height: 50px; background: blue; position: fixed; bottom: 0;z-index:2"></div>

【讨论】：

我想过这个选项，但是内容的背景是图片，所以这个会有问题...请问还有其他选择吗？