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

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 的出现，这实际上相当容易。检查下面的 link。

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

此页面将介绍如何使用 Flexbox 解决与您类似的问题，并将引导您完成整个过程。

Answer 3

更改页脚样式

position: absolute;

至

position: fixed;

希望这是你想要实现的:)

Answer 4

使用CSScalc()函数。根据您的 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 用于页脚的上边距。

所以我们只是从总视口高度中减去剩余的 div。

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

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

How to make the footer positioned at the bottom of all screen sizes when you have different height pages?

html

css

footer

responsive-design

twitter-bootstrap