CODEWITHSUNDEEP
htmlcssfooter
arevilla009
arevilla009

Reputation: 453

Force footer to be alway in the bottom in CSS

I'm generating a left side menu and it's populated with some objects. The problem is that I need to position my footer allways at the bottom of the page (no matter how many objects there are in the menu).

I'm using absolute position and bottom tag but the result is not the correct one.

enter image description here

This is the CSS code I'm using for it:

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

Any suggestion? Thanks for reading!

Upvotes: 0

Views: 75

Answers (5)

arevilla009
arevilla009

Reputation: 453

Changing position: absolute for position:fixed resolved the problem. Thanks for all replies.

Upvotes: -1

ROOT
ROOT

Reputation: 11622

I prefer to use flex-box like in the following snippet:

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

Upvotes: 0

waqas Mumtaz
waqas Mumtaz

Reputation: 707

You can use position:fixed for your footer ex

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

Upvotes: 0

Carosihno
Carosihno

Reputation: 22

You could change the position to fixed. something like the below:

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

Upvotes: 0

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

You should change position: absolute; to position: fixed; for mainfooter

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

Upvotes: 2

Related Questions