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

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 查询，以使标题调整大小和标题下的下划线向下移动等。您可以使用在 html 页面中添加 @media 查询一个样式元素（在头部）。继续尝试，看起来不错。