如何使页脚固定在底部？

Question

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

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

当正文内容低时，页脚上升。即在正文内容下方。如果正文内容较少，我希望页脚固定在页面底部。

如何实现？

.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>

Answer 1

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

例如：

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

对于CSS：

.container {
    min-height: 90vh;
}

.footer {
    height: 10vh;
}

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

Answer 2

@Nivitha G 请查找以下内容code.I 希望您也有同样的期望。

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

<footer>Fixed Footer</footer>

Answer 3

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

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

Answer 4

如果您希望您的页脚也滚动到折叠下方但永远不会高于 window 底部，您可以这样做：

<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/

Answer 5

   Will you please try by making this.

html, body {
    height: 100%;
}

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

如何使页脚固定在底部？

How to make a footer fixed at bottom?

html

javascript

css

jquery

footer