Question

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

如何将页脚放置在屏幕底部，而不是粘贴方式，它始终位于屏幕底部，我只是为了避免它位于屏幕中间的窗口中间这比网页的内容要大。

我正在寻找使用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>

Answer 1

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

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

Answer 2

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

如何在大屏幕上为小网页底部放置页脚

2 个答案: