当您有不同高度的页面时，如何使页脚位于所有屏幕尺寸的底部？

Question

我正在尝试制作一个粘性页脚，但由于某种原因它正在播放。 当我在其中一个上设置页脚时，我有几页具有不同内容高度的页面，它会破坏其他页面。 如何为所有页面创建全局样式，以便在页面底部有一个粘性页脚，并且如果不需要它还删除任何滚动，因为我的某些页面需要滚动才能到达页脚，而内容大约有高度。

当我使用一个名为 screen-fly 的网站来测试我的网站以在所有屏幕尺寸上进行测试时，我需要一个能够保证在任何屏幕尺寸上进行响应式设计的解决方案。

我的代码在 plunker 上可用，但是我进行了很多研究并尝试了一些样式解决方案。这是其中的两个

解决方案 1：-

/* **************************************************/
                      /* One solution */
    html, body {
      height:100%;
      min-height:100%;
  }
                      /*  navigation style*/
  .navbar-brand {
    margin: 0 auto;
    color:white;
  }
  .navbar-inverse {
    background: rgb(14, 78, 114);
  }
  .navbar-inverse .navbar-nav>li>a {
    color: #8EE8CD;
  }

  /* Content style*/
  .container.content {
    margin-top: 100px;
  }

                      /*  footer style*/
  .wrapper {
      position:relative;
      min-height:100%;
  }
  footer {
      text-align: center;
      position:absolute;
      bottom:0px;
      width:100%;
      color: white;
     background-color: rgb(14, 78, 114);
  }

溶液 2：-

/*   Another solution */

  html, body {height: 100%;}

  #wrap {min-height: 100%;}

  #main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

  #footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

  /*Opera Fix*/
  body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
  }

这里是代码的一些链接。

plunker 编辑器：Plunker Editor

plunker 全屏：Plunker Full Screen

我在 screenfly 上的网站：Screenfly Site

Answer 1

尝试溢出：隐藏；身体。

Answer 2

这是许多人试图解决的常见问题。在很长一段时间内，它要么需要妥协，要么需要一些 hacky CSS。值得庆幸的是，随着 Flexbox 的出现，它实际上相当容易。检查下面的链接。

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

此页面将介绍如何使用 Flexbox 解决您遇到的问题，并将引导您完成它。

Answer 3

更改页脚样式

position: absolute;

到

position: fixed;

希望这是您想要实现的目标:)

Answer 4

使用 CSS calc() 函数。根据您的 plunkr 示例，将 min-height 赋予.container.content 而不是将min-height 赋予html, body, wrapper。

查看更新后的Plunkr。

---

逻辑曾经给min-height：

.container.content {
  min-height: calc(100vh - 140px);
}

在上面的代码中：

• vh：视口高度（100vh 给出屏幕总高度）
• 140px：100px 用于页眉 + 20px 用于页脚 + 20px 用于页脚的上边距。

所以我们只是从总视口高度中减去 divs 的其余部分。

Answer 5

对于这些情况，我会使用 Flexbox。这使您能够完全删除您的包装 div .wrapper

要实现您想要的，只需将以下代码添加到您的 CSS 中

body {
  display: flex;
  flex-direction: column;
}

并更改页脚 div 的 CSS，在您的情况下将 footer 更改为此

footer {
  margin-top: auto;
  text-align: center;
  color: white;
  background-color: rgb(14, 78, 114);
}