bootstrap layout - 将页脚和内容行添加到底部

Question

我正在设计此网站：http://ecostructionny.com。我正处于我正在布置主页的地步，我有点卡住了。我想在底部列出一个列出联系信息的页脚行，然后在它的正上方是一行3个信息。背景图像是页面的主要视觉特征，所以我试图留出空间供他们展示。

任何人都可以提供一些建议吗？如果有更好的方式来解决它，我会喜欢其他一些建议。

谢谢！

Answer 1

有一个很好的页脚教程

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

演示页面在这里：

http://www.lwis.net/profile/CSS/sticky-footer.html

基本前提是主体页面被拉伸到页面的100％。最小高度也是100％。

然后，页脚会被赋予以下规则：

   #footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

Answer 2

当然，你知道你会得到与回应的人一样多的想法。在设计方面，每个人的观点都不同。根据您上面的陈述，我将引导您下载bootstrap附带的bootstrap sticky-footer示例。另外，根据我的经验，如果你做一些工作并调整照片大小以使它们在旋转木马中看起来很自然，效果会更好。当图像被拉伸以适应时，它会扭曲一些东西。花些时间和实验。此外，我发现使用带有引导程序的英雄模板页面非常适合您正在尝试的事情。试验。!!

Tony Tambe：bootstrap的所有响应代码都是肯定的，但是您必须在样式中添加一些@media查询以使标题调整大小并且标题下的下划线向下移动等。您可以在其中添加@media查询使用样式元素的html页面（在head部分中）。继续试验，看起来不错。