如何使页脚固定在底部？ [复制]答案

【问题标题】：How to make a footer fixed at bottom? [duplicate]如何使页脚固定在底部？ [复制]
【发布时间】：2017-11-22 13:48:08
【问题描述】：

我在我的项目中使用页脚。我正在使用 c#.net mvc。

我插入页脚。但我有问题。

当 Body 的内容含量较低时，页脚会向上。即低于正文内容。如果正文内容少，我希望页脚固定在页面底部。

我怎样才能实现它？

.footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}

<div class="footer">
  Bottom Page
</div>

【问题讨论】：

css-tricks.com/snippets/css/sticky-footer

标签： javascript jquery html css footer

【解决方案1】：

您可以使用来自 CSS3 的新属性和值。

例如：

<body>
    <div class="container"></div>
    <div class="footer"></div>
</body>

对于 CSS：

.container {
    min-height: 90vh;
}

.footer {
    height: 10vh;
}

这样，您的页脚将始终位于底部，即使您的容器为空

【讨论】：

这会使您的页脚高度动态化，可能不是您想要的，也可能低于您的页脚内容高度......
这仍然是一个解决方案，他没有具体说明这些点。关于页脚内容，您可以对其进行调整。您还可以使用媒体查询来处理特定情况。

【解决方案2】：

@Nivitha G 请找到以下代码。我希望你也期待。

footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  padding: 20px 0;
  position: fixed;
  right: 0;
  text-align: center;
}

&lt;footer&gt;Fixed Footer&lt;/footer&gt;

【讨论】：

这没什么用。它出现在任何内容的顶部。
@freedomn-m 同意你的看法。你能告诉我我们怎样才能更好地做到这一点吗？
SO 中已经有很多重复项
你更喜欢哪一个？

【解决方案3】：

如果您希望页脚也滚动到首屏下方，但永远不会高于窗口底部，您可以执行以下操作：

<div id="content"></div>
<footer></footer>

然后

html{
  height:100%;
}
body{
  min-height:100%;
  margin:0;
  position:relative;
}

footer{
  background: #ccc;
  height:30px;
  position: absolute;
  bottom:0;
  width:100%
}

#content{
  padding-bottom:30px;
}

https://jsfiddle.net/ay6jx9yp/

【讨论】：

【解决方案4】：

   Will you please try by making this.

html, body {
    height: 100%;
}

这是与您的问题类似的answered link 之一：

【讨论】：

【解决方案5】：

您可以使用site-footer 类来创建粘性页脚：

<div class="page-wrap">  
  Content!      
</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

【讨论】：