Question

我想在我的网站上设置页脚，我想要修复它（总是在botton中）。它工作正常，但是当内容已满时，它没有显示我给它的边缘顶部。请帮忙，我需要一种方法给出固定的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>

Answer 1

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

Answer 2

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

如何使div固定并具有保证金？

2 个答案: