引导布局 - 粘贴页脚和内容行到底部

我正在设计本网站：http://ecostructionny.com。我只是在布置主页时，我有点卡住了。我想要在底部列出联系信息的页脚行，然后在它的正上方是一行三行的信息。背景图片是该页面的主要视觉特征，所以我试图留出空间让他们展示。引导布局 - 粘贴页脚和内容行到底部

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

谢谢！

来源

2013-06-30 Tony Tambe

有一个在

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; 
}

来源

2013-06-30 13:37:55

谢谢Harsha。我会检查出来，让你知道它是否适用于我。 –

好的朋友应该工作 –

当然，你知道你会得到尽可能多的想法，作出回应的人。在设计时，每个人的意见都不一样。根据你上面的陈述，我会引导你看到bootstrap下载的bootstrap sticky-footer例子。此外，根据我的经验，如果您做一些工作并调整照片大小，使其在旋转木马中显得自然，它会更好。当图像被拉伸以适应它时会扭曲一些东西。花点时间和实验。另外，我发现使用bootstrap的英雄模板页面可以很好地处理你正在尝试做的事情。试试吧！

Tony Tambe：引导程序具有所有响应代码是，但是您将不得不添加一些@media查询到您的样式中，以使标题的大小和标题下方的下划线向下移动等。您可以将@media query添加到使用样式元素的HTML页面（在头部分）。继续试验，看起来不错。

来源

2013-06-30 13:50:35 vbmike

谢谢vbmike。我一直在试验几个星期，看看使用旋转木马的最佳方式是什么。我想让“蓝调”躺在旋转木马上，但是页脚要坚守底部。我在其他地方看到了粘脚，所以我会尝试。感谢您的建议。 –

我已经在我的开始模板中包含的一个示例是在此站点：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – vbmike

再次感谢vbmike。我已经调整好了，但如果你不介意的话，我会有一个跟进问题。如果现在检查出来，您会发现调整浏览器窗口的大小最终会显示灰色背景，导航栏会继续。任何造型技巧？我可以调整一个常规的导航栏，但引导程序具有所有响应代码，所以我不想过多地搞乱它。 –

引导布局 - 粘贴页脚和内容行到底部

回答

相关问题