如何将页脚放在大屏幕上的小网页底部答案

【问题标题】：How to put footer on bottom for small webpage on large screen如何将页脚放在大屏幕上的小网页底部
【发布时间】：2017-01-30 20:37:30
【问题描述】：

我有一个小网页。我正在尝试在页面底部放置页脚。在移动设备上，当用户滚动到最后时，它自然会很好地显示出来。但在桌面上，页脚显示在窗口中间。

我怎样才能将页脚放在屏幕底部，但不是以粘性方式，它始终位于屏幕底部，我只是为了避免它位于屏幕窗口的中间大于网页内容。

我正在寻找使用 Bootstrap 或纯 CSS 的解决方案。

这是我的页面的示例，请参阅 http://jsbin.com/cibixegeqi/edit?html,css,output

代码：

<body>
  <div>
    <h1>Some content</h1>
    <p>This is a really small web page. On a standard mobile it is a little more than a screen, but on a laptop it is only half a window.</p>
  </div>

  <div id="footer">
    <b>This is my footer.</b> I want it to be on the bottom of the window, but not sticky, just want to avoid that it is in the middle of the screen on a larger screen.
  </div>
</body>

【问题讨论】：

你能提供你的代码吗？
Footer bottom of the screen的可能重复

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

CSS：

html, body{height:100%;}
#footer{position:absolute;bottom:0;}

应该可以...

更新长正文：（尝试为页脚设置高度，以便为正文设置填充）

html{height:100%;}
body{padding-bottom:50px;min-height:100%;position:relative;}
#footer{position:absolute;bottom:0;height:50px;}

【讨论】：

当文本与页脚重叠时这不会产生问题吗：jsbin.com/vojucokavu/edit?html,css,output
@Armin 试试我的更新（所以标题不仅仅适用于小网页；-)）
@pbenard 问题似乎并没有在我这边得到解决。但总的来说，我只是向未来的观众提出一个问题:)
@Armin 对不起，我忘记了相对于身体的位置，它有效（应该）
@pbenard 现在好像好多了。

【解决方案2】：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

#footer {
   position:absolute;
   bottom:0;
   width:100%;
}

【讨论】：

添加了代码，但没有变化，见output.jsbin.com/cibixegeqi我会阅读文章，看看是否还有更多内容。谢谢！