Заставить нижний колонтитул быть всегда внизу в CSS

Question

Я создаю левое боковое меню, и оно заполнено некоторыми объектами. Проблема в том, что мне нужно расположить нижний колонтитул всегда внизу страницы (независимо от того, сколько объектов в меню).

Я использую абсолютную позицию и нижнюю часть тег, но результат неправильный.

введите описание изображения здесь

Это код 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

Вы должны изменить 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>

Answer 2

Изменение позиции: абсолютная для позиции: фиксированная, решенная проблема. Спасибо за все ответы.

Answer 3

Я предпочитаю использовать flex-box как в следующем фрагменте:

// Not required!
// This is just to demo functionality.

var add = document.getElementById("add");

add.addEventListener("click", function() {
  var p = document.createElement("p");
  p.innerHTML = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo."
  document.getElementById("content").appendChild(p)
});

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  background-color: blue;
  color: #FFF
}

<div id="content" class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer 
</footer>

Answer 4

Вы можете использовать положение: фиксировано для вашего нижнего колонтитула ex

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

Answer 5

Вы можете изменить положение на фиксированное. что-то вроде ниже:

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