html - 强制页脚始终位于 CSS 的底部

Question

我正在生成一个左侧菜单，其中填充了一些对象。问题是我需要将页脚始终 放在页面底部(无论菜单中有多少对象)。

我使用了绝对位置和底部标签，但结果不正确。

enter image description here

这是我为此使用的 CSS 代码:

/*Footer*/
#mainfooter{
    font-size: 16px; 
    background:#dd3035;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}
/*Left menu*/
.list-group{
    padding-left: initial;
}

.list-group-item{
    background-color: #dd3035;
    border-style: solid;
    border-color: #eeeeee;
    text-align: center;
    margin-top: 1%;
    margin-left: 5%;
    margin-right: 5%;
    list-style:none;
    border-radius: 10px;
}

<div id="kid_list">
 <div class="list-group">
  <ul style="padding-left: initial;">
   <t t-if="kids">
    <t t-foreach="kids" t-as="kid">
     <li class="list-group-item">
      <a t-attf-href="/user/{{kid.id}}">
       <i class="fa fa-user fa-2x"></i>
       <span class="nav-text">
        <t t-esc="kid.name" />
       </span>
      </a>
     </li>
    </t>
   </t>
  </ul>
 </div>
</div>
<div id="mainfooter">
 <small>Copyright 2019-2020, Coas Education Website</small>
</div>

有什么建议吗？ 感谢阅读!

Answer 1

对于 mainfooter，您应该将 position: absolute; 更改为 position: fixed;

#mainfooter {
  font-size: 16px;
  background: #dd3035;
  color: white;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
}

.list-group {
  padding-left: initial;
}

.list-group-item {
  background-color: #dd3035;
  border-style: solid;
  border-color: #eeeeee;
  text-align: center;
  margin-top: 1%;
  margin-left: 5%;
  margin-right: 5%;
  list-style: none;
  border-radius: 10px;
}

<div id="kid_list">
  <div class="list-group">
    <ul style="padding-left: initial;">
      <div t-if="kids">
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
        <li class="list-group-item">test</li>
      </div>
    </ul>
  </div>
</div>

<div id="mainfooter">
  <small>Copyright 2019-2020, Coas Education Website</small>
</div>