Semantic UI footer at the end

Question

I am using Semantic-UI in my project. I created an index page, everything works fine with elements (navbar, footer, etc.).

Now I am creating a registration page, but the footer does not reach the end of the page, what can I do?

Footer:

<div class="ui inverted vertical footer segment"> <div class="ui container"> Travel Match 2015. All Rights Reserved </div> </div> 

NOTE: I do not have any CSS rules (yet) in the footer, only those added by semantic-ui

UPDATE: navigator code:

 <div class="ui inverted segment"> <div class="ui container"> <div class="ui inverted secondary menu"> <div class="item"> <i class="plane icon app-icon"></i> </div> <div class="right item"> <a href="/signup">Signup</a> </div> </div> </div> </div> 

form code:

  <form class="ui large form container"> <div class="ui stacked segment"> <div class="field"> <div class="ui left icon input"> <i class="user icon"></i> <input type="text" name="email" placeholder="E-mail address"> </div> </div> <div class="field"> <div class="ui left icon input"> <i class="lock icon"></i> <input type="password" name="password" placeholder="Password"> </div> </div> <div class="ui fluid large teal submit button">Login</div> </div> <div class="ui error message"></div> </form> <div class="striped"></div> 

Answer 1

You can try absolute positioning, as your content is smaller than the Semantic-ui docs section.

Use min-height to apply the CSS rule, since the footer is placed at the bottom in a certain range of heights and thus avoids any overlap over the content.

 @media (min-height: 320px) { .ui.footer.form-page { /* Increased specificity for SO snippet priority */ position: absolute; bottom: 0; width: 100%; } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.css" rel="stylesheet" /> <div class="wrapper"> <div class="ui inverted segment"> <div class="ui container"> <div class="ui inverted secondary menu"> <div class="item"> <i class="plane icon app-icon"></i> </div> <div class="right item"> <a href="/signup">Signup</a> </div> </div> </div> </div> <form class="ui large form container"> <div class="ui stacked segment"> <div class="field"> <div class="ui left icon input"> <i class="user icon"></i> <input type="text" name="email" placeholder="E-mail address"> </div> </div> <div class="field"> <div class="ui left icon input"> <i class="lock icon"></i> <input type="password" name="password" placeholder="Password"> </div> </div> <div class="ui fluid large teal submit button">Login</div> </div> <div class="ui error message"></div> </form> <div class="striped"></div> </div> <div class="ui inverted vertical footer segment form-page"> <div class="ui container"> Travel Match 2015. All Rights Reserved </div> </div>