Question

我想在页面底部放一个页脚，但不应固定其位置。每当我加载页面时，页脚就会向上，而当数据完全从服务器加载时，页脚就会位于底部。但是我希望页脚始终位于底部，但不固定。

这是我的代码：

<footer class="page-footer">
<div class=" row  text-center p-2" style="background-color:#e4e3dcdc; max-width: 1400px; margin: auto; bottom:0">
    <div class="col-sm-4 footer-copyright" style="color: rgb(0, 0, 0);"> 
       1995 - {{date| date:'yyyy'}}
    </div> 
    <div class="col-sm-4"> 
        <a href="#" title="Terms of Use" style="color:rgb(238, 137, 4); "> 
            Terms of Use
        </a> 
    </div>     
</div>
</footer>

如何解决？

Answer 1

html {
  height: 100%;
}

body {
  margin: 0;
  padding:0;
  line-height: normal;
  height: 100%;
}


.main-container {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #f1f1f1;
}

 .page-footer {
   background: #e4e3dc;
   padding: 11px 25px;
   grid-row-start: 3;
   grid-row-end: 3;
   z-index: 1;
}

demo link

如何将页脚设置在页面底部（不固定），并在加载后也保持在底部

1 个答案: