如果内容较少，如何使页脚在窗口底部可见[重复]答案

【问题标题】：how to make footer visible at bottom of window if content is less [duplicate]如果内容较少，如何使页脚在窗口底部可见[重复]
【发布时间】：2015-12-22 18:26:37
【问题描述】：

HTML

<div class="header">logo</div>
<div class="some-content">some content</div>
<div class="footer">Footer here</div>

在类名为“some-content”的 div 中，如果它有更多内容，则页脚在窗口底部可见，但如果内容较少，页脚会在内容块结束的地方向上跳，如何解决这个问题。

【问题讨论】：

谷歌搜索“粘性页脚”。
发布您的 CSS 并让 SO 知道您尝试使页脚“在窗口底部可见”。

标签： jquery css

【解决方案1】：

我无法正确理解这个问题，但如果您希望页脚始终位于固定位置，即浏览器底部，那么您可以使用以下样式

 <div class="header">logo</div>
<div class="some-content">some content</div>
<div class="footer" style="position:absolute;top:95%;width:100%;background-color:orange;">Footer here</div>

【讨论】：

【解决方案2】：

这是你需要做的..检查 cmets

/**** required CSS ***/

* {
  box-sizing: border-box
}
/* browser reset */

html {
  min-height: 100%;
  position: relative;
  padding-bottom: 50px;
  /* height of footer */
}
body {
  height: 100%:
}
/* height of footer */

footer {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
}
/* DEMO Styling */

footer {
  background: green;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

<html>

<body>
  soemthing which doesn't covers whole page
  <footer>copyright and I stay at bottoms always</footer>
</body>

【讨论】：