web-dev-qa-db-fra.com

Pied de page de l'interface utilisateur sémantique à la fin

J'utilise Semantic-UI dans mon projet. J'ai créé une page d'index, tout fonctionne bien avec les éléments (navbar, footer, etc).

Maintenant, je crée une page d'inscription mais le pied de page ne va pas à la fin de la page, que puis-je faire?

Code de pied de page:

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

NOTE: Je n'ai pas (encore) de règles CSS dans le pied de page, seulement celles ajoutées par semantic-ui

MISE À JOUR: code de barre de navigation:

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

code de formulaire:

    <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>
htmlcsshtml5css3semantic-ui
14
Jose Osorio

Vous pouvez essayer le positionnement absolute car votre contenu est plus petit que la section dans Documents sémantiques-ui .

Utilisation min-height pour appliquer la règle CSS car le pied de page est placé en bas à une certaine plage de hauteur et éviter ainsi tout chevauchement sur le contenu.

@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>
17
Manoj Kumar