Question

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

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

当Body含量低时，页脚会上升。即身体内容以下。如果正文包含低内容，我希望将页脚固定在页面底部。

我怎样才能实现它？

＆＃13;

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

＆＃13;

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

＆＃13;

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请找到以下代码。我希望你期待同样的。

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类创建粘性页脚：

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

Answer 4

如果你的页脚也在页面下滚动但是从不高于窗口的底部你可以这样做：

<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之一：

如何将页脚固定在底部？

5 个答案: