强迫页脚停留在底部？

我只是有像这样的布局......

<body> 

<div id="header"> 
</div> 

<div id="left"> 
</div> 

<div id="right"> 
</div> 

<div class="clear"></div> 

<div id="footer"> 
</div>

我所想要做的是确保页脚始终保持在屏幕的底部，我是否有去很远了内容甚至没有足够的内容一直走到屏幕的底部。

截至目前，我可以得到上面列出的两种方式的工作，但我希望两个工作。

这是我为此设置的CSS。

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

#footer { 
position: absolute; 
bottom: 0; 
}

我知道，如果我申请最小身高：100％;到CSS文档中的HTML元素，随着内容的发展，但如果我没有任何内容，它本身不会粘在屏幕的底部。分辨率不管。

我已经多次遇到这个问题，并且从来不确定如何弄清楚。所以，一些帮助将不胜感激，连同一些解释。

非常感谢大家的帮助！

来源

2011-10-07 Aaron Brewer

'但是如果我没有任何内容，每se'但最终你应该有内容，所以它有什么关系。真的没有人关心你的页脚被困在底部而不是内容下面。我不明白为什么人们为了达到这种无价值的效果而浪费了太多时间。 – animuson

@animuson：我关心它是否卡在底部。如果没有使用我的设计将页脚卡在底部，它会显得很荒谬。感谢您的输入。 :) –

可能重复[如何使页脚固定页脚]（http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom ） –

使用这种队友，这是一个很好解释，易于遵循教程：

http://code.google.com/p/cleanstickyfooter/

最佳粘页脚以往的作品真的非常好

报价从网站（我同意完全地）：

的区别

goog le“sticky footer”，下面列出了为什么这项技术比这次搜索的最佳结果更好地运作。

http://ryanfait.com/sticky-footer/ - 这种技术很相似，但是cleanStickyFooter需要更多。当您想使页脚的宽度为 100％时，位于这里的技术不能很好地播放。

http://www.cssstickyfooter.com/ - 这种技术是我指出的其中一种，我说的是当它用CSS清除黑客入侵。

来源

2011-10-07 15:34:05 fmsf

无论内容量多少，或者屏幕底部是否需要将页脚附加到内容的底部？

如果第一个，不要打扰它的定位 - 让它跟内容之后的页面流一起去吧。

如果第二，使用位置：固定

你可能需要一个更加清楚一点。什么卷轴？页眉？剩下？对？页脚？您的整体内容是左侧还是右侧？为什么你的身体相对定位？为什么你有一个“身高：100％”;为html？

来源

2011-10-07 15:32:05 Ben

我想将页脚粘贴在内容的底部和内容的底部，如果没有足够的内容流到屏幕的底部，我仍然希望它粘在屏幕的底部，那有意义吗？我不想做一个固定的位置，因为这样它将会坚持到屏幕的底部，而不管我有多少内容，并且在哪个内容div中要求和使用margin和/或padding。左和右是内容，更是如此。 –

你可以看看在this Artice by RyanFait

跨浏览器指定的布局，总是工作:)

来源

2011-10-07 15:35:43 Ryan

从上面的谷歌... http://ryanfait.com/sticky-footer/ - 这种技术是相似的，但cleanStickyFooter需要更多。当你想让你的页脚有100％的宽度时，位于这里的技术不会很好地播放。 –

强迫页脚停留在底部？

回答

相关问题