Semantic-ui: Fixed footer

[deniz946]

Hello, im using the footer code of this template, it works fine in populated pages but in an low populated pages, the footer get to the middle and the footer is shown in white, how i can fix it to the bottom?

 <div class="ui inverted vertical footer segment">
    <div class="ui center aligned container">
      <div class="ui stackable inverted divided grid">
        <div class="three wide column">
          <h4 class="ui inverted header">Group 1</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Link One</a>
            <a href="#" class="item">Link Two</a>
            <a href="#" class="item">Link Three</a>
            <a href="#" class="item">Link Four</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">Group 2</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Link One</a>
            <a href="#" class="item">Link Two</a>
            <a href="#" class="item">Link Three</a>
            <a href="#" class="item">Link Four</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">Group 3</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Link One</a>
            <a href="#" class="item">Link Two</a>
            <a href="#" class="item">Link Three</a>
            <a href="#" class="item">Link Four</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header">LibrosTrading</h4>
          <p>Exchange book you have for book you want.</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <img src="http://localhost:9000/assets/images/yeoman.png" class="ui centered mini image">
      <div class="ui horizontal inverted small divided link list">
        <a class="item" href="#">Site Map</a>
        <a class="item" href="#">Contact Us</a>
        <a class="item" href="#">Terms and Conditions</a>
        <a class="item" href="#">Privacy Policy</a>
      </div>
    </div>

footer.footer {
  text-align: center;
  margin-top: 70px;
  border-top: 1px solid #E5E5E5;
}

 .ui.footer.segment {
    margin: 5em 0em 0em;
    padding: 5em 0em;
  }

[Aniel]

You could implement the sticky footer via flexbox. See http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

[Ryuno-Ki]

It's possible without Flexbox, too (in case you need to support elder browser).
Something like this:

.footer {
    position: relative;
    margin-top: -70px;
    height: 70px;
    clear: both;
}

Would be helpful, if you could link to a JSFiddle/CodePen for live hacking.

[Thanty]

Ryuno, this solution is nearly useless because of static footer height.
It can only be used in non-responsive layouts and with simple static data (no menus).

[jlukic]

I'd recommend this solution, which semantic-ui.com uses and @Aniel already pointed out
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/