Семантический нижний колонтитул UI в конце

Question

Я использую Semantic-UI в своем проекте. Я создал индексную страницу, все работает нормально с элементами (navbar, footer и т. Д.).

Теперь я создаю страницу регистрации, но нижний колонтитул не доходит до конца страницы, что я могу сделать?

код Footer:

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

Примечание: У меня нет никаких правил CSS (пока) в сноске, только те, добавленные семантического-интерфейса

UPDATE: навигация код:

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

Answer 1

Вы можете попробовать absolute позиционирование, так как ваше содержание меньше, чем в секции Semantic-ui docs.

Используйте min-height для применения правила CSS, поскольку нижний колонтитул расположен внизу в определенном диапазоне высоты и, таким образом, избегает любого перекрытия над содержимым.

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