web-dev-qa-db-fra.com

Créer un pied de page à l’aide de ZURB Foundation CSS Framework

J'utilise le framework CSS de la fondation ZURB pour concevoir un site Web. J'essaie actuellement de créer un pied de page qui restera au bas de ma page. J'ai le code suivant pour le pied de page, mais ça ne va pas au bas, mais plutôt au milieu.

Pourriez-vous s'il vous plaît me dire comment créer un pied de page (en utilisant le cadre de fondation ZURB) qui restera en bas?

<div class="row">
    <div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>
zurb-foundation
17
black_belt

Je créerais deux pieds de page différents - un pour les ordinateurs de bureau et les tablettes - et un pour les téléphones. 

Il est très facile d'utiliser " afficher sur et masquer sur options" de Zurb. Tous les graphiques peuvent être utilisés par les deux pieds de page afin que toute "pénalité de téléchargement" soit réduite.

Pour créer un pied de page collant pour votre site Web, vous devez ajouter du code CSS à Zurb. (Vous pouvez l'ajouter au fichier app.css, qui est le référentiel de Zurb pour votre CSS supplémentaire.)

L'article de Brad Frost (publié par Ed Charbeneau) est également une excellente lecture - je n'avais jamais vu cela auparavant.

13
Jules Matthews

Simple! Zurb Foundation est elle-même basée sur Compass. Vous pouvez donc utiliser le mixin 'Compass Sticky Footer'.

_ { http://compass-style.org/reference/compass/layout/sticky_footer/

Voici un exemple de la façon de procéder: http://compass-style.org/examples/compass/layout/sticky-footer/

Mais vous venez juste:

<div class='example'>
  <div id='layout'>
    <div id='header'>
      <h1>Sticky Footer Example</h1>
    </div>
    <p>
      This is the main content area.
    </p>
    <p>
      In this example you should pretend that the red box
      is actually the browser window.
    </p>
    <p>
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    </p>
    <div id='layout_footer'></div>
  </div>
  <div id='footer'>
    This is the footer area.
  </div>
</div>

Et en toi SCSS

@import "compass/reset.scss";
@import "compass/layout.scss";

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");

#header {
  background: #999999;
  height: 72px; }

#footer {
  background: #cccccc; }

.example {
  height: 500px;
  border: 3px solid red;
  p {
    margin: 1em 0.5em; } }
16
superlogical

HTML:

<div id="footer">
        My Awsome Footer 2014
</div>

CSS

#footer{
    height: 50px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    line-height: 50px;
    color: #aaa;
    text-align: center;
    width: 100%;
}

travail de violon: http://jsfiddle.net/AunmM/

4
Vincent

Pour référence, voici comment j'ai accompli cela en utilisant Foundation 4.0.

Étant donné une balise <footer>.

footer {
  @include panel($panel-color, $panel-padding);
  width: 100%;
  margin: 0;
  position: fixed;
  bottom: 0;
}
2
leetheguy

Découvrez ce pied de page collant simple pour la fondation, pas besoin d'une #wrapper ou une hauteur fixe! Fonctionne dans le mobile aussi. http://tangerineindustries.com/download/sticky_footer/

2
Corey Snyder

Avec foundation 6, l'importation de la boussole est impossible. Et la solution de contournement est difficile à trouver.

Ce petit assistant peut être une bonne solution avec la fondation: http://tangerineindustries.com/download/sticky_footer/

Pro:

  1. Le développeur a créé cela pour l’utiliser avec ZF 6.
  2. Vous avez seulement besoin d'une balise <footer>.
  3. Fonctionne avec une hauteur de pied de pied flexible et réactive, même avec le redimensionnement de la fenêtre
  4. Vous n'avez pas besoin de plus de #wrapper, #pusher, #footer que ce soit Html-elements.
  5. Vous n'avez pas besoin de CSS supplémentaire.

Contra:

  1. Utilise JavaScript.
1
Herr_Hansen

Vous essayez de créer un "pied de page collant" ou un "pied de page à position fixe". C'est quelque chose qui est indépendant de Foundation et qui est plutôt une fonction de CSS en général.

Je suggérerais de lire cet article de Brad Frost. Il identifie le CSS de base impliqué dans la création d'un élément Position fixe et les problèmes de compatibilité qui en découlent. http://bradfrostweb.com/blog/mobile/fixed-position/

0
Ed Charbeneau